有时候在做flex界面开发的时候,组件下拉框文本显示不全,如下所示:
在这种情况下,如果你使用的是DropdownList的话,直接设置width不会生效,这时候,我们可以通过皮肤类来实现,如下所示:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/ --> <s:SparkSkin name="CustomDropDownListSkin" 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="0.5"> <!-- states --> <s:states> <s:State name="normal" /> <s:State name="open" /> <s:State name="disabled" /> </s:states> <!-- host component --> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.DropDownList")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ import mx.events.FlexEvent; /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ static private const contentFill:Array = ["bgFill"]; override public function get contentItems():Array {return contentFill}; 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"); } openButton.setStyle("cornerRadius",getStyle("cornerRadius")); if (borderstroke) { borderstroke.color = getStyle("borderColor"); borderstroke.alpha = getStyle("borderAlpha"); } super.updatedisplayList(unscaledWidth,unscaledHeight); } protected function labeldisplay_updateCompleteHandler(evt:FlexEvent):void { hostComponent.toolTip = labeldisplay.toolTip; } ]]> </fx:Script> <!--- The PopUpAnchor control that opens the drop-down list. <p>In a custom skin class that uses transitions,set the <code>itemDestructionPolicy</code> property to <code>none</code>.</p> --> <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"> <!--- This includes borders,background colors,scrollers,and filters. --> <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" right="0" top="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> <!-- fill --> <!--- Defines the appearance of drop-down list's background fill. --> <s:Rect id="background" left="1" right="1" top="1" bottom="1" > <s:fill> <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. --> <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"/> </s:layout> </s:DataGroup> </s:Scroller> </s:Group> </s:PopUpAnchor> <!--- The default skin is DropDownListButtonSkin. --> <s:Button id="openButton" skinClass="spark.skins.spark.DropDownListButtonSkin" focusEnabled="false" left="0" right="0" top="0" bottom="0" /> <s:Label id="labeldisplay" maxdisplayedLines="1" mouseEnabled="false" mouseChildren="false" left="7" right="30" top="2" bottom="2" width="120" verticalAlign="middle" verticalCenter="1" showTruncationTip="true" updateComplete="labeldisplay_updateCompleteHandler(event);" /> </s:SparkSkin>
2.然后使用这个皮肤即可
<s:DropDownList id="concSelecter" labelFunction="commonLabelHandler" change="concSelecter_changeHandler(event)" dataProvider="{concModelLocator.dataModelList}" selectedindex="{concModelLocator.selectedConcIndex}" styleName="dropDownList" requireSelection="true" skinClass="cn.ac.iscas.gz.sems.skin.CustomDropDownListSkin" />
效果如下所示:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。