使用FB4,我想改变开放火花DropDownList的高度。默认情况下,最多可以在滚动前显示6个项目。我的下拉列表包含7个项目,所以我想更改打开的下拉列表的高度以适合所有7个项目而不滚动。作为解决方法,我已经更改了项目的字体大小,使它们更小,所有7适合,但较小的字体看起来不太好。有没有办法改变这个高度?我对Flash很新,所以如果这是一个复杂的解决方案,请详细说明:-)。
解决方法
问题是,在Flex 4中,DropDownListSkin已经为您可能使用的默认外观定义了maxHeight =“134”。如果对象延伸超出该高度,则强制滚动条显示。所有您需要做的是将其DropDownListSkin代码复制/粘贴到自定义皮肤中,并通过CSS将其应用于您的DropDownList:
VariableHeightDropDownListSkin
<?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>
让我知道,如果这有帮助,槊