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

我正在使用spark DropDownLists，我不想在下拉列表中看到任何水平滚动条。我确定下拉比锚更宽，所以我有一个自定义皮肤，将popUpWidthMatchesAnchorWidth设置为false。但我不希望下拉比主播更小。这是我的困境。Flex 4.5 - Spark DropDownList - DropDown的最小宽度是锚的宽度

我想出了一个有时能够正常工作的解决方案，但是有一些问题。我的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的宽度。

如何更改此设置，以便我可以使用不同宽度的多个DropDownLists，但始终确保下拉宽度大于或等于锚宽度？

来源

2011-07-29 Travesty3

您是否尝试过使用'openButton.width'而不是'openButton.getExplicitOrMeasuredWidth（）'？ – Constantiner

我怀疑dropDown在某处设置了一些最小宽度。如果我不得不猜测;我会说它在DataGroup中;但这只是一个猜测。如果你真的想这样做，你应该编写自己的算法来确定下拉宽度;这将是乏味的，我期望效率不高，因为您必须渲染每个项目才能100％完成。 – JeffryHouser

@Constantiner - 叹气...是的，那有效。对我来说，他们看起来并不一样，但我想这正是让我过分复杂化的原因。我想我需要使用'getExplicitOrMeasuredWidth'来获取下拉的宽度，所以我只是在另一边使用它，认为它应该得到相同的值。发布作为答案，我会接受它。 – Travesty3

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

来源

2011-07-29 19:54:15 Constantiner

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

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

来源

2011-07-29 19:51:15

该解决方案也适用于我。对@Constantiner给出答案是因为他首先回复了原始帖子的评论。尽管谢谢你的帮助！ – Travesty3

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

回答

相关问题