增加警告框Flex中的按钮之间的空隙3

问题描述

我试图把20-30px差距警告框按钮（YES和NO）之间。但无法找到这样的弯曲造型点。我试图水平的差距，并且还填充，但不成功。

下面是示例codeI在努力，我发现通过网站浏览的时候。

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;

＆LT; MX：应用程序名称=Alert_style_test
    的xmlns：MX =htt​​p://www.adobe.com/2006/mxml
    布局=垂直
    verticalAlign =中间
    的backgroundColor =白
    的creationComplete =showAlert（）＆GT;



 ＆LT;！ - 由警报控制。 - ＆GT;
 ＆LT; MX：字符串ID =消息＆gt;在敏捷的棕色狐狸跳过了懒狗。

  敏捷的棕色狐狸跳过了懒狗＆LT; / MX：字符串＆GT;
 ＆LT; MX：字符串ID =头衔＆gt;在敏捷的棕色狐狸跳过了懒狗＆LT; / MX：字符串＆GT;

 ＆LT; MX：脚本＆GT;
    ＆LT;！[CDATA [
        进口mx.controls.Alert;

        私人VAR一：警告;


        私有函数showAlert（）：无效{
            Alert.yesLabel =是;
            Alert.noLabel =否;
            Alert.buttonWidth = 50;

            A = Alert.show（
                    信息，
                    标题，
                    Alert.NO | Alert.YES
                ）;
            / *使警报形式的文本不可选。 * /
            a.mx_internal :: alertForm.mx_internal :: textField.selectable = FALSE;
        }
    ]]≥
  ＆LT; / MX：脚本＆GT;

 ＆LT; MX：样式＆GT;

    警报{
            颜色：＃124332;
            背景色：#FFFFFF;
            头 - 颜色：＃243322，＃243322;
            头高度：19;
            下拉阴影功能：真正的;
            下拉阴影颜色：＃243322;
            拐角半径：6;
            边框风格：固体;
            边框厚度：1;
            边框颜色：＃243322;
            页脚，颜色：＃243322，＃FFFFFF;
            标题的风格，名称：称号;
            横向间隙：500;
            水平分离皮肤：白色;
            }

            。标题{
            字体-family：宋体;
            字体大小：10;
            字体重量：大胆的;
            颜色：#FFFFFF;
            }

            .alertButton {
                        letterSpacing两个：0;
                        字体：11;
                        cornerRadius：10;
                        fontWeight设置：正常;
                        textRollOverColor：白色;
                        颜色：红色;

                        水平的差距：-500;
                    }
 ＆LT; / MX：样式＆GT;

   ＆LT;！ - 点击启动警报控制。 - ＆GT;
 ＆LT; MX：按钮标签=启动提示点击=showAlert（）; /＆GT;

＆LT; / MX：用途＆gt;
 

解决方案

尝试是这样的：

添加 FlexEvent.UPDATE_COMPLETE 来alertForm在提醒：

  a.mx_internal :: alertForm.addEventListener（FlexEvent.UPDATE_COMPLETE，alertForm_updateHandler）;
 

而在此处理拷贝一些东​​西从原来的alertForm 的updateDisplayList 方法：

 私有函数alertForm_updateHandler（事件：FlexEvent）：无效
{
    VAR形式：UIComponent = a.mx_internal :: alertForm;
    VAR按钮：数组= a.mx_internal :: alertForm.mx_internal ::按钮;
    VAR下一页末：数字;
    VAR newY：数字;
    VAR newWidth：数字;

    newWidth = buttons.length *（键[0] .WIDTH + 120） -  120;

    下一页末= Math.round（（form.width  -  newWidth）/ 2）;
    对于（VAR我：= 0; I＆LT; buttons.length;我++）
    {
        按钮[I] .X =下一页末
        按钮[I] .tabIndex = I + 1;
        下一页末+ =键[I] .WIDTH + 120;
    }
}
 

，其中120是你的新差距。

希望这可能是有用的。

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> 

解决方案

Try something like this:

Add FlexEvent.UPDATE_COMPLETE to alertForm in your alert:

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

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;
    }
}

where 120 is your new gap.

Hope this can be useful.

这篇关于增加警告框Flex中的按钮之间的空隙3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！