Question

我试图在警告框按钮之间设置20-30px的间隙（是和否）。但无法在flex中找到这样的样式点。我尝试过水平间隙，还有填充，但是徒劳无功。

以下是我正在尝试的示例代码，我在浏览网站时找到了该代码。

 <?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>

Answer 1

我唯一的想法是将新类作为TitleWindow或Panel的子项实现，并添加您想要的所有功能。我知道这不是最好的解决方案，但你可以尝试一下。

The new Alert window

以下是我的建议：

//应用

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600">

<fx:Script>
    <![CDATA[
        import mx.events.CloseEvent;

        private function onBtnClick():void
        {
            var title:String = "The quick brown fox jumped over the lazy dog?";
            var message:String = "The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.";

            AdvancedAlert.buttonWidth = 70;
            AdvancedAlert.buttonGap = 50;
            AdvancedAlert.commonWidth = 400;

            AdvancedAlert.show(message, title, AdvancedAlert.YES | AdvancedAlert.NO | AdvancedAlert.CANCEL, this._closeHandler);
        }

        private function _closeHandler(evt:CloseEvent):void
        {
            switch (evt.detail)
            {
                case AdvancedAlert.YES:
                    trace("yes");
                    break;
                case AdvancedAlert.NO:
                    trace("no");
                    break;
                case AdvancedAlert.OK:
                    trace("ok");
                    break;
                case AdvancedAlert.CANCEL:
                    trace("cancel");
                    break;
            }
        }
    ]]>
</fx:Script>

<mx:Button click="onBtnClick()" label="Alert"/>

</mx:Application>

//警报实施

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            layout="absolute" 
            width="{commonWidth}" 
            height="110" 
            styleName="titleWindow" 
            verticalScrollPolicy="off" 
            horizontalScrollPolicy="off" 
            creationComplete="onCreationComplete()" >

<fx:Style>
    @namespace mx "library://ns.adobe.com/flex/mx";

    .windowStyles {
        color: #ffffff;
    }

    .titleWindow {
        borderAlpha: 1.0;
        borderColor: #8a9faa;
        backgroundColor: #8a9faa;
        cornerRadius: 5;
    }

</fx:Style>

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.Button;
        import mx.core.FlexGlobals;
        import mx.events.CloseEvent;
        import mx.managers.PopUpManager;

        public static const YES:uint = 0x0001;
        public static const NO:uint = 0x0002;
        public static const OK:uint = 0x0004;
        public static const CANCEL:uint= 0x0008;

        [Bindable]private var message:String;

        [Bindable]public static var buttonGap:int = 20;
        public static var buttonWidth:int = 80;
        [Bindable]public static var commonWidth:int = 80;
        [Bindable]private var buttonHeight:int = 25;

        private var buttons:uint;
        private var buttonNames:ArrayCollection = new ArrayCollection();

        private function onCreationComplete():void
        {
            addButtons();
        }

        private function addButtons():void
        {
            buttonNames.removeAll();
            hbButtons.removeAllChildren();

            if ((YES & buttons) != 0)
                buttonNames.addItem("Yes");
            if ((NO & buttons) != 0)
                buttonNames.addItem("No");
            if ((OK & buttons) != 0)
                buttonNames.addItem("Ok");
            if ((CANCEL & buttons) != 0)
                buttonNames.addItem("Cancel");

            for each (var bn:String in buttonNames)
            {
                var btn:Button = new Button();
                btn.width = buttonWidth;
                btn.height = buttonHeight;
                btn.label = bn;
                btn.name = bn;

                btn.addEventListener(MouseEvent.CLICK, onBtnClick);

                hbButtons.addChild(btn);
            }
        }

        private function onBtnClick(evt:Event):void
        {
            var currentButtonName:String = (evt.currentTarget as Button).name;

            var closeEvent:CloseEvent = new CloseEvent(CloseEvent.CLOSE);

            switch (currentButtonName)
            {
                case "Yes":
                    closeEvent.detail = YES;
                    break;
                case "No":
                    closeEvent.detail = NO;
                    break;
                case "Ok":
                    closeEvent.detail = OK;
                    break;
                case "Cancel":
                    closeEvent.detail = CANCEL;
                    break;
            }

            this.dispatchEvent(closeEvent);

            PopUpManager.removePopUp(this);
        }

        public static function show(message:String = "", title:String = "", buttons:uint = 0x4, closeHandler:Function = null):void
        {
            var advancedAlert:AdvancedAlert = new AdvancedAlert();

            advancedAlert.message = message;
            advancedAlert.title = title;
            advancedAlert.buttons = buttons;

            if (closeHandler != null)
                advancedAlert.addEventListener(CloseEvent.CLOSE, closeHandler);

            PopUpManager.addPopUp(advancedAlert, Sprite(FlexGlobals.topLevelApplication), true); 
            PopUpManager.centerPopUp(advancedAlert);
        }
    ]]>
</fx:Script>

<mx:VBox id="vbMain" width="100%" height="100%">
    <mx:Text id="txtMessage" text="{message}" width="100%" height="35" color="0xffffff" selectable="false"/>
    <mx:HBox id="hbButtons" height="{buttonHeight}" width="100%" horizontalGap="{buttonGap}" horizontalAlign="center"/>
</mx:VBox>
</mx:TitleWindow>

Answer 2

尝试这样的事情：

在警报中将FlexEvent.UPDATE_COMPLETE添加到alertForm：

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

在此处理程序中复制原始alertForm updateDisplayList方法中的一些内容：

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是你的新差距。

希望这可能有用。

增加Flex 3中Alert Box按钮之间的差距

2 个答案: