Apache flex Flex-如何更改开放下拉列表高度

使用FB4，我想更改打开的spark DropDownList的高度。默认情况下，滚动前最多显示6项。我的下拉列表包含7个项目，因此我想更改打开下拉列表的高度，以适应所有7个项目，而无需滚动。作为一种解决方法，我已经更改了项目的字体大小，使其更小，并且所有7个项目都适合，但是较小的字体看起来不太好。有没有办法改变这个高度？我对Flash比较陌生，所以如果它是一个复杂的解决方案，请详细说明：-）。

在FB3中，它是行数，因为下拉列表是列表控件的后代。FB4可能是类似的

myDropdown.rowCount = 7;

我通常使用更像

myDropdown.rowCount = myDataProvider.lenght();

---

不幸的是，在Flex 4中，这比在Flex 3中要复杂得多：

---

您应该能够使用更高的

requestedRowCount

（）为DropDownList定义布局，但是对于>6行，您需要做更多的工作（）。

问题是，在Flex 4中，DropDownList皮肤已经为您可能正在使用的默认皮肤定义了

maxHeight=“134”

。如果对象延伸超过该高度，则强制滚动条出现。您只需将其DropDownListSkin代码复制/粘贴到自定义皮肤中，并通过CSS将其应用到您的DropDownList：

可变高度下拉列表皮肤

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

    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 

    <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="true">

        <!-- removed maxHeight! -->
        <s:Group id="dropDown" minHeight="22">
            <!-- border/fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x5380D0" />
                </s:stroke>
                <s:fill>
                    <s:SolidColor color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="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:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="7" angle="90" alpha="0.45" color="0x6087CC" />
            </s:filters>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.spark.DropDownListButtonSkin" />
    <s:Label id="labelDisplay" verticalAlign="middle" lineBreak="explicit"
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:Skin>

<?xml version="1.0" encoding="utf-8"?>
<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">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|DropDownList
        {
            skinClass: ClassReference("VariableHeightDropDownListSkin");
        }
    </fx:Style>

        <s:DropDownList labelField="name" horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout requestedRowCount="7"/>
            </s:layout>
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object name="one"/>
                    <fx:Object name="two"/>
                    <fx:Object name="three"/>
                    <fx:Object name="four"/>
                    <fx:Object name="five"/>
                    <fx:Object name="six"/>
                    <fx:Object name="seven"/>
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:DropDownList>

</s:Application>

示例应用程序

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

    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 

    <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="true">

        <!-- removed maxHeight! -->
        <s:Group id="dropDown" minHeight="22">
            <!-- border/fill -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x5380D0" />
                </s:stroke>
                <s:fill>
                    <s:SolidColor color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="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:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="7" angle="90" alpha="0.45" color="0x6087CC" />
            </s:filters>
        </s:Group>
    </s:PopUpAnchor>

    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.spark.DropDownListButtonSkin" />
    <s:Label id="labelDisplay" verticalAlign="middle" lineBreak="explicit"
        mouseEnabled="false" mouseChildren="false"
        left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:Skin>

<?xml version="1.0" encoding="utf-8"?>
<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">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace s "library://ns.adobe.com/flex/spark";

        s|DropDownList
        {
            skinClass: ClassReference("VariableHeightDropDownListSkin");
        }
    </fx:Style>

        <s:DropDownList labelField="name" horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout requestedRowCount="7"/>
            </s:layout>
            <s:dataProvider>
                <mx:ArrayCollection>
                    <fx:Object name="one"/>
                    <fx:Object name="two"/>
                    <fx:Object name="three"/>
                    <fx:Object name="four"/>
                    <fx:Object name="five"/>
                    <fx:Object name="six"/>
                    <fx:Object name="seven"/>
                </mx:ArrayCollection>
            </s:dataProvider>
        </s:DropDownList>

</s:Application>

@名称空间mx“library://ns.adobe.com/flex/mx";
@命名空间s“library://ns.adobe.com/flex/spark";
s |下拉列表
{
skinClass:ClassReference（“可变高度下拉列表皮肤”）；
}

如果有帮助，请告诉我，

---

Lance

viatropos的答案会起作用，但是你应该尽量避免覆盖整个皮肤

在本例中，您将注意到，在viatropos的VariableHeightDropDownListSkin代码中，删除maxHeight属性的组中，还指定了一个“id”

现在看看DropDownList的文档，您会注意到SkinParts部分中有一个“dropDown”皮肤部分。这实际上是DropDownList的一个属性

因此，您可以简单地使用actionscript（我在这里使用UIComponent.DEFAULT\u MAX\u HEIGHT，但您可以使用任何您想要的）：

---

如果使用verticalLayout的属性requestedRowCount，不是更容易吗

<s:DropDownList dataProvider="{myDataProvider}">
    <s:layout>
        <s:VerticalLayout requestedRowCount="10"/>
    </s:layout>
</s:DropDownList>

这是迄今为止我发现的最简单的解决方案。感谢您发布这篇文章。值得一提的是，这可能只适用于Flash Builder 4.5及更新版本（在最初的文章中，我使用的是FB4）。请参阅@PieterKuijpers-answer，其中有一个指向Flex问题的链接，其中显示该问题已在4.5.0.17882中得到解决。使用此选项，不要忘记添加gap=“0”，horizontallign=“contentJustify”如果我想获得spark comboBox的rowCount属性，那么它不是同一个朋友，Flex 4Works中不存在mx的

下拉列表

属性，但spark不存在。