[Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔

<?xml version="1.0" encoding="utf-8"?>
<!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPopUpGap.mxml-->
<s: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" backgroundColor="0x000000">
    
    <fx:Script>
        <![CDATA[
            import mx.controls.Menu;
            import mx.events.FlexEvent;
            protected function slider_changeHandler(event:Event):void
            {
                popUpButton.close();
                popUpButton.open();

            }
            
            protected function popUpButton_initializeHandler(event:FlexEvent):void
            {
                var menu:Menu = new Menu();
                menu.dataProvider = arr;
                popUpButton.popUp = menu;
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <fx:Array id="arr">
            <fx:Object label="《霹雳先锋》香港票房8916612" actor="Steven Chow"/>
            <fx:Object label="《捕风汉子》香港票房3149395" actor="Steven Chow"/>
            <fx:Object label="《小偷阿星》香港票房7968106 " actor="Steven Chow"/>
            <fx:Object type="separator"/>
            <fx:Object label="笑傲江湖之东方不败（1992）" actor="Jet Li"/>
            <fx:Object label="精武英雄（1994）" actor="Jet Li"/>
            <fx:Object label="给爸爸的信（1995）" actor="Jet Li"/>
        </fx:Array>
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }
        
        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }

    </fx:Style>
    <s:controlBarContent>
        <s:Form styleName="plain">
            <s:FormItem label="popUpGap:">
                <!--<s:HSlider >-->
                <mx:HSlider id="slider" minimum="-5" maximum="10" value="0" liveDragging="true" snapInterval="1" tickInterval="1" change="slider_changeHandler(event)" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>
    <mx:PopUpButton id="popUpButton" label="Please select an item..." openAlways="true" popUpGap="{slider.value}" closeDuration="0" openDuration="0" initialize="popUpButton_initializeHandler(event)" />
</s:Application>