增加Flex 3中Alert Box的按钮间距 [英] Increase the gap between the buttons of Alert Box in Flex 3

问题描述

我试图在警报框按钮(是和否)之间放置 20-30 像素的间隙.但无法在 flex 中找到这样的造型点.我尝试过水平间隙和填充，但徒劳无功.

I am trying to put a gap of 20-30px between the Alert box buttons(YES and NO). but unable to find such styling point in flex. I have tried horizontal-gap, and also padding, but in vain.

以下是我在浏览网站时发现的示例代码.

Below is the sample code i am trying, which i found when browsing through sites.

 <?xml version="1.0" encoding="utf-8"?>

<mx:Application name="Alert_style_test"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white"
    creationComplete="showAlert()">



 <!-- Used by the Alert control. -->
 <mx:String id="message">The quick brown fox jumped over the lazy dog.

  The quick brown fox jumped over the lazy dog.</mx:String>
 <mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>

 <mx:Script>
    <![CDATA[
        import mx.controls.Alert;

        private var a:Alert;


        private function showAlert():void {
            Alert.yesLabel = "Yes";
            Alert.noLabel = "No";
            Alert.buttonWidth = 50;

            a = Alert.show(
                    message,
                    title,
                    Alert.NO | Alert.YES
                );
            /* Make the Alert form's text non-selectable. */
            a.mx_internal::alertForm.mx_internal::textField.selectable = false;
        }
    ]]>
  </mx:Script>

 <mx:Style>

    Alert{
            color : #124332;
            background-color: #ffffff;
            header-colors : #243322, #243322;
            header-height:19;
            drop-shadow-enabled: true;
            drop-shadow-color :#243322;
            corner-radius :6;
            border-style :solid;
            border-thickness: 1;
            border-color : #243322;
            footer-colors : #243322, #ffffff;
            title-style-name : "title";
            horizontal-gap:500;
            horizontal-separator-skin:white;
            }

            .title{
            font-family :Verdana;
            font-size :10;
            font-weight :bold;
            color :#ffffff;
            }

            .alertButton {
                        letterSpacing: 0;
                        fontSize: 11;
                        cornerRadius: 10;
                        fontWeight: normal;
                        textRollOverColor: white;
                        color: red;

                        horizontal-gap:-500;
                    }
 </mx:Style>

   <!-- Click to launch Alert control. -->
 <mx:Button label="Launch Alert" click="showAlert();" />

</mx:Application> 

推荐答案

试试这个:

将 FlexEvent.UPDATE_COMPLETE 添加到警报中的 alertForm:

Add FlexEvent.UPDATE_COMPLETE to alertForm in your alert:

a.mx_internal::alertForm.addEventListener(FlexEvent.UPDATE_COMPLETE, alertForm_updateHandler);

在这个处理程序中，从原始的 alertForm updateDisplayList 方法中复制一些东西:

And in this handler copy some stuff from original alertForm updateDisplayList method:

private function alertForm_updateHandler(event:FlexEvent):void
{
    var form:UIComponent = a.mx_internal::alertForm;
    var buttons:Array = a.mx_internal::alertForm.mx_internal::buttons;
    var newX:Number;
    var newY:Number;
    var newWidth:Number;

    newWidth = buttons.length * (buttons[0].width + 120) - 120;

    newX = Math.round((form.width - newWidth) / 2);
    for (var i:int = 0; i < buttons.length; i++)
    {
        buttons[i].x = newX
        buttons[i].tabIndex = i + 1;
        newX += buttons[i].width + 120;
    }
}

其中 120 是您的新差距.

where 120 is your new gap.

希望这对您有用.

这篇关于增加Flex 3中Alert Box的按钮间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！