数据提供者更改时调整火花组合框中下拉宽度的位置

Question

我在组合框皮肤中使用属性 popUpWidthMatchesAnchorWidth="false" 来设置下拉菜单的最大宽度。 在此每次更新组合框中用户类型的 dataprovider 时。每当 dataprovider 更改时，下拉菜单的宽度不会调整到最大宽度，也不会正确定位。

在 Dataprovider 更改时，我想将下拉列表宽度设置为元素的最大宽度，并正确对齐下拉列表的位置。

    [HostComponent("spark.components.ComboBox")]
    ]]>
</fx:Metadata> 

<fx:Script fb:purpose="styling">
    <![CDATA[       
        private var paddingChanged:Boolean;
        private var cornerRadiusChanged:Boolean;
        private var cornerRadius:Number = 0;            
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array { return contentFill };

        override protected function commitProperties():void
        {
            super.commitProperties();

            if (paddingChanged && textInput)
            {

                var padding:Number;

                padding = getStyle("paddingLeft");
                if (textInput.getStyle("paddingLeft") != padding)
                    textInput.setStyle("paddingLeft", padding);

                padding = getStyle("paddingTop");
                if (textInput.getStyle("paddingTop") != padding)
                    textInput.setStyle("paddingTop", padding);

                padding = getStyle("paddingRight");
                if (textInput.getStyle("paddingRight") != padding)
                    textInput.setStyle("paddingRight", padding);

                padding = getStyle("paddingBottom");
                if (textInput.getStyle("paddingBottom") != padding)
                    textInput.setStyle("paddingBottom", padding);
                paddingChanged = false;
            }

            if (cornerRadiusChanged)
            {
                cornerRadiusChanged = false;
            }
        }

        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);

            if (allStyles || styleProp.indexOf("padding") == 0)
            {
                paddingChanged = true;
                invalidateProperties();
            }
            if (allStyles || styleProp == "cornerRadius")
            {
                cornerRadiusChanged = true;
                invalidateProperties();
            }                
        }


        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == false)
            {
                if (border)
                    border.visible = false;
                if (background)
                {
                    background.left = background.top = background.right = background.bottom = 0;
                }
                if (scroller)
                    scroller.minViewportInset = 0;
            }
            else
            {
                if (border)
                    border.visible = true;
                if (background)
                {
                    background.left = background.top = background.right = background.bottom = 1;
                }
                if (scroller)
                    scroller.minViewportInset = 1;
            }

            if (dropShadow)
                dropShadow.visible = getStyle("dropShadowVisible");



            if (borderStroke)
            {
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
            }
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="open" />
    <s:State name="disabled" />
</s:states>


<s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
               left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
               popUpPosition="below" popUpWidthMatchesAnchorWidth="false">


    <s:Group id="dropDown" maxHeight="112" minHeight="22" minWidth="{this.width}">


        <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>


        <s:Rect id="border" left="0" right="0" top="0" bottom="0">
            <s:stroke>

                <s:SolidColorStroke id="borderStroke" weight="1"/>
            </s:stroke>
        </s:Rect>


        <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
            <s:fill>

                <s:SolidColor id="bgFill" color="0xFFFFFF" />
            </s:fill>
        </s:Rect>


        <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

            <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                <s:layout>
                    <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                </s:layout>
            </s:DataGroup> 
        </s:Scroller>
    </s:Group>
</s:PopUpAnchor>


<s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
          skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" />  

<s:TextInput id="textInput" enabled.disabled="false"
             left="0" right="18" top="0" bottom="0" 
             skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> 

Answer 1

每当dataprovider在combobox文本输入变化时发生变化，都必须使用这个代码来设置combobox中下拉菜单的位置。

LayoutManager.getInstance().validateNow();

(this.skin as ComboBoxSkin).popUp.updatePopUpTransform();