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

<!--Flex中如何通过variableRowHeight样式减少PopUpButton与弹出菜单间间距的例子 PopUpButtonRowHeight.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"  >

    <fx:Script>

        <![CDATA[

            import mx.controls.Menu;

            import mx.events.DropdownEvent;

            import mx.events.FlexEvent;

            import mx.utils.ObjectUtil;

            protected function popUpButton1_initializeHandler(event:FlexEvent):void

            {

                var menu:Menu = new Menu();

                menu.showRoot = false;

                menu.labelField = "@label";

                menu.dataProvider = ObjectUtil.copy(data);

                popUpButton1.popUp = menu;

            }

            protected function popUpButton2_initializeHandler(event:FlexEvent):void

            {

                var menu:Menu = new Menu();

                menu.showRoot = false;

                menu.labelField = "@label";

                menu.dataProvider = ObjectUtil.copy(data);

                menu.variableRowHeight = true;

                popUpButton2.popUp = menu;

            }

            protected function popUpButton1_openHandler(event:DropdownEvent):void

            {

                popUpButton1.open();

                popUpButton2.open();

            }

            protected function popUpButton1_creationCompleteHandler(event:FlexEvent):void

            {

                var pUB:PopUpButton = event.currentTarget as PopUpButton;

                // resize and open

                pUB.popUp.width = pUB.width;

                pUB.open();

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

        <fx:XML id="data" source="data.xml"/>

    </fx:Declarations>

    <fx:Style>

        @namespace s "library://ns.adobe.com/flex/spark";

        @namespace mx "library://ns.adobe.com/flex/mx";

        mx|PopUpButton {

            openDuration: 0;

            closeDuration: 0;

            fontWeight: normal;

            textAlign: left;

        }

    </fx:Style>

    <s:HGroup>

        <mx:PopUpButton id="popUpButton1" label="variableRowHeight = false" openAlways="true" width="250" initialize="popUpButton1_initializeHandler(event)" creationComplete="popUpButton1_creationCompleteHandler(event)" open="popUpButton1_openHandler(event)"/>

        <mx:PopUpButton id="popUpButton2" label="variableRowHeight = true" openAlways="true" width="250" initialize="popUpButton2_initializeHandler(event)" creationComplete="popUpButton1_creationCompleteHandler(event)" open="popUpButton1_openHandler(event)"/>

    </s:HGroup>

</s:Application>