首页 > 代码库 > Flex 列表控件中的操作
Flex 列表控件中的操作
主要操作包括：显示提示，使用图标，编辑列表条目中数据。
1.使用数据提示：
当鼠标停留在条目上时，可以显示该条目的相关数据提示。
当利用滚动条时，可以显示滚动条的相关提示。
在列表控件中使用showDataTips和showScrollTips属性指明是否显示条目提示和滚动条提示。
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14"> 5 <fx:Script> 6 <![CDATA[ 7 8 9 //定义数据条目显示的内容，在列表控件中，该方法只有一个参数，为当前的数据条目10 11 private function myDataTipFunction(item:Object):String12 {13 return "您查看的内容为:"+item.label+item.data;14 }15 16 /* 17 定义滚动条显示的提示内容，该方法包括2个参数18 direction为滚动条的方向19 position为滚动条离控件顶端的距离20 */ 21 private function scrollTipFunction(direction:String,position:Number):String22 {23 if(direction == "vertical")24 return "查看剩余条目"25 else26 return "";27 28 }29 30 ]]>31 </fx:Script>32 33 <fx:Declarations>34 <!-- 将非可视元素（例如服务、值对象）放在此处 -->35 36 37 <fx:Model id="myPhone">38 <!--定义列表控件所需的数据-->39 <states>40 <state label="诺基亚" data=http://www.mamicode.com/"nokia"/>41 <state label="摩托罗拉" data=http://www.mamicode.com/"moto"/>42 <state label="索爱" data=http://www.mamicode.com/"se"/>43 <state label="三星" data=http://www.mamicode.com/"sum"/>44 <state label="Palm" data=http://www.mamicode.com/"pal"/>45 <state label="黑莓" data=http://www.mamicode.com/"bb"/>46 <state label="联想" data=http://www.mamicode.com/"le"/>47 <state label="其他" data=http://www.mamicode.com/"etc"/>48 </states>49 </fx:Model>50 </fx:Declarations>51 52 <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">53 <mx:Label text="选择手机品牌"/>54 <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->55 <mx:List id="source" color="blue" width="100%" height="100%"56 dataProvider="{myPhone.state}"57 rollOverColor="#80FF00" showDataTips="true"58 showScrollTips="true" dataTipFunction="myDataTipFunction" scrollTipFunction="scrollTipFunction"/>59 60 </mx:Panel>61 </s:WindowedApplication>
效果如图：
2.在列表控件中使用图标
在列表控件中可以使用iconField和iconFunction属性定义图标相关的属性以及方法。
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14"> 5 <fx:Script> 6 <![CDATA[ 7 //定义条目中所使用的图标 8 [Embed(source="assets/mm-icon.png") ] 9 public var iconSymbol:Class;10 11 12 13 ]]>14 </fx:Script>15 16 <fx:Declarations>17 <!-- 将非可视元素（例如服务、值对象）放在此处 -->18 19 20 <fx:Model id="myPhone">21 <!--定义列表控件所需的数据-->22 <states>23 <state label="诺基亚" data=http://www.mamicode.com/"nokia" myIcon="iconSymbol"/>24 <state label="摩托罗拉" data=http://www.mamicode.com/"moto" myIcon="iconSymbol"/>25 <state label="索爱" data=http://www.mamicode.com/"se" myIcon="iconSymbol"/>26 <state label="三星" data=http://www.mamicode.com/"sum" myIcon="iconSymbol"/>27 <state label="Palm" data=http://www.mamicode.com/"pal" myIcon="iconSymbol"/>28 <state label="黑莓" data=http://www.mamicode.com/"bb" myIcon="iconSymbol"/>29 <state label="联想" data=http://www.mamicode.com/"le" myIcon="iconSymbol"/>30 <state label="其他" data=http://www.mamicode.com/"etc" myIcon="iconSymbol"/>31 </states>32 </fx:Model>33 </fx:Declarations>34 35 <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">36 <mx:Label text="选择手机品牌"/>37 <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->38 <mx:List id="source" color="blue" width="100%" height="100%"39 dataProvider="{myPhone.state}"40 rollOverColor="#80FF00" iconField="myIcon"/>41 42 </mx:Panel>43 </s:WindowedApplication>
iconField="myIcon"：指明条目的图标由数据中的myIcon属性提供。
3.编辑列表条目中数据
编辑列表中的数据时，需要将editable属性设置为true。
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14"> 5 <fx:Script> 6 <![CDATA[ 7 //定义条目中所使用的图标 8 9 import mx.events.ListEvent;10 //鼠标单击时触发的事件条目处于可编辑状态11 private function itemEditBegin(event:ListEvent):void12 {13 state.text="当前状态为：可以编辑数据";14 }15 //当编辑完条目，鼠标单击其他区域时触发的事件，条目处于编辑状态完成16 private function itemEditEnd(event:ListEvent):void17 {18 state.text="当前状态为:完成编辑数据";19 }20 21 //当单击条目时，显示条目显示的标签，在编辑后单击标签，显示更新后的标签值22 private function showType(event:ListEvent):void23 {24 typee.text = event.target.selectedItem.label;25 }26 27 28 29 ]]>30 </fx:Script>31 32 <fx:Declarations>33 <!-- 将非可视元素（例如服务、值对象）放在此处 -->34 35 36 <fx:Model id="myPhone">37 <!--定义列表控件所需的数据-->38 <states>39 <state label="诺基亚" data=http://www.mamicode.com/"nokia" />40 <state label="摩托罗拉" data=http://www.mamicode.com/"moto" />41 <state label="索爱" data=http://www.mamicode.com/"se" />42 <state label="三星" data=http://www.mamicode.com/"sum" />43 <state label="Palm" data=http://www.mamicode.com/"pal" />44 <state label="黑莓" data=http://www.mamicode.com/"bb" />45 <state label="联想" data=http://www.mamicode.com/"le" />46 <state label="其他" data=http://www.mamicode.com/"etc" />47 </states>48 </fx:Model>49 </fx:Declarations>50 51 <mx:Panel title="xianshitubiao" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340" height="316">52 <mx:Label text="选择手机品牌"/>53 <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->54 <mx:List id="source" color="blue" width="100%" height="100%"55 dataProvider="{myPhone.state}"56 rollOverColor="#80FF00" editable="true" itemEditBeginning="itemEditBegin(event)"57 itemEditEnd="itemEditEnd(event)" itemClick="showType(event)"58 />59 <mx:Label id="state"/>60 <mx:Label id="typee"/>61 62 </mx:Panel>63 </s:WindowedApplication>
效果如图：
Flex 列表控件中的操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。