Flex 4.5 - Spark DropDownList - DropDown 的最小宽度是锚的宽度

Question

我正在使用 spark DropDownLists，我不想在下拉列表中看到任何水平滚动条。我可以接受下拉菜单比锚点宽，所以我有一个自定义皮肤，将popUpWidthMatchesAnchorWidth 设置为 false。但我不希望下拉菜单比锚点小。这是我的困境。

我想出了一个有时可行的解决方案，但它有问题。我的 DropDownList 皮肤如下：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" minHeight="25"> 

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                // anchor width is the min width of the dropdown
                if (dropDown && openButton && popUp && dropDown.getExplicitOrMeasuredWidth() < openButton.getExplicitOrMeasuredWidth())
                    popUp.popUpWidthMatchesAnchorWidth = true;

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" stateGroups="closed" />
        <s:State name="open" />
        <s:State name="disabled" stateGroups="closed" />
    </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="134" minHeight="22" >

            <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 color="#222222"/>
                </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"/>
                    </s:layout>
                </s:DataGroup> 
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" alpha.disabled="0.5"
        skinClass.closed="assets.skins.dropDownList.dropDownListNormalButtonSkin"
        skinClass.open="assets.skins.dropDownList.dropDownListOpenButtonSkin"/>  

    <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:SparkSkin>

当下拉列表的内容比锚点宽或小于大约 100 像素时，这可以按预期工作，但是如果我明确地将 DropDownList 实例中的宽度设置为 200 像素，并且下拉列表的内容是大约 150 像素宽，下拉菜单比锚点小。

基本上，看起来openButton.getExplicitOrMeasuredWidth() 返回大约 100，不管我将 DropDownList 的宽度设置为多少。

如何更改此设置，以便拥有多个具有不同宽度的 DropDownList，但始终确保下拉列表的宽度大于或等于锚点的宽度？

Answer 1

你说： “但如果我明确地将 DropDownList 实例中的宽度设置为 200 像素，并且下拉列表的内容大约为 150 像素宽，则下拉列表比锚点小。”

所以如果你明确设置宽度，那么 this.width 总是可靠的。只需将 button.getExplicitOrMeasuredWidth() 替换为 this.width，问题就解决了。

if (dropDown && openButton && popUp && dropDown.getExplicitOrMeasuredWidth() < this.width)
                popUp.popUpWidthMatchesAnchorWidth = true;

Answer 2

我建议你使用openButton.width 而不是openButton.getExplicitOrMeasuredWidth()。