首页 > 代码库 > Flex 列表控件
Flex 列表控件
1.列表控件标签
<mx:List>
常用属性：
除继承ListBase类的属性外，还包括如下常用属性：
在editedPosition属性中，条目编辑的位置通常为行和列的序号，如｛columnIndex:0,rowIndex:3｝。列表控件的序号都是从0开始。
2.列表控件事件：
列表控件的事件除继承ListBase类的事件外还包括编辑时的事件。
itemEditBegin:当对条目进行编辑，即editedItemPosition属性被赋值时，触发该事件。该事件表明条目处于准备被编辑的状态。
itemEditBeginning:用户单击条目时进入itemEditBegin状态，在用户释放鼠标时，触发该事件，进入条目编辑状态。
itemEditEnd:完成条目编辑。当编辑后的数据从条目编辑器中保存到数据提供器中时，触发该事件。
itemFocusIn:当鼠标焦点停留在条目渲染器时，触发该事件。
itemFocusOut：当条目渲染器失去鼠标焦点时，触发该事件。
scroll：如果控件中出现滚动条，则拖动滚动条时触发该事件。
（上述几个事件的事件对象类型均为mx.events.ListEvent）
3.创建列表控件
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:Declarations> 6 <!-- 将非可视元素（例如服务、值对象）放在此处 --> 7 8 9 <fx:Model id="myPhone">10 <!--定义列表控件所需的数据-->11 <states>12 <state label="诺基亚" data=http://www.mamicode.com/"nokia"/>13 <state label="摩托罗拉" data=http://www.mamicode.com/"moto"/>14 <state label="索爱" data=http://www.mamicode.com/"se"/>15 <state label="三星" data=http://www.mamicode.com/"sum"/>16 <state label="Palm" data=http://www.mamicode.com/"pal"/>17 <state label="黑莓" data=http://www.mamicode.com/"bb"/>18 <state label="联想" data=http://www.mamicode.com/"le"/>19 <state label="其他" data=http://www.mamicode.com/"etc"/>20 </states>21 </fx:Model>22 </fx:Declarations>23 24 <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">25 <mx:Label text="选择手机品牌"/>26 <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->27 <mx:List id="source" color="blue" width="100%" height="100%"28 dataProvider="{myPhone.state}"29 rollOverColor="#80FF00"/>30 31 </mx:Panel>32 </s:WindowedApplication>
其中：rollOverColor="#80FF00"表示改变鼠标停留在条目上时条目高亮的颜色。
效果如图：
使用labelFunction属性时，该属性指向的方法有其固定的格式，方法的参数为列表中的条目，类型为Object,返回新定义的标签值，类型为String,代码如下：
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 //返回值为每个条目的label和data属性的组合 9 public function myLabelFunc(item:Object):String{10 return item.data + "," + item.label;11 }12 ]]>13 </fx:Script>14 15 <fx:Declarations>16 <!-- 将非可视元素（例如服务、值对象）放在此处 -->17 18 19 <fx:Model id="myPhone">20 <!--定义列表控件所需的数据-->21 <states>22 <state label="诺基亚" data=http://www.mamicode.com/"nokia"/>23 <state label="摩托罗拉" data=http://www.mamicode.com/"moto"/>24 <state label="索爱" data=http://www.mamicode.com/"se"/>25 <state label="三星" data=http://www.mamicode.com/"sum"/>26 <state label="Palm" data=http://www.mamicode.com/"pal"/>27 <state label="黑莓" data=http://www.mamicode.com/"bb"/>28 <state label="联想" data=http://www.mamicode.com/"le"/>29 <state label="其他" data=http://www.mamicode.com/"etc"/>30 </states>31 </fx:Model>32 </fx:Declarations>33 34 <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">35 <mx:Label text="选择手机品牌"/>36 <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->37 <mx:List id="source" color="blue" width="100%" height="100%"38 dataProvider="{myPhone.state}"39 rollOverColor="#80FF00" labelFunction="myLabelFunc"/>40 41 </mx:Panel>42 </s:WindowedApplication>
效果如图：
4.列表控件事件
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 import mx.controls.Alert; 9 import mx.events.ListEvent;10 //定义单击数据条目的方法11 private function itemClickEvent(event:ListEvent):void{12 mx.controls.Alert.show(event.target.selectedItem.label,"详细信息");13 }14 //定义鼠标在条目上滚动的方法15 private function itemRollEvent(event:ListEvent):void{16 detail.text="单击选定品牌";17 }18 ]]>19 </fx:Script>20 21 <fx:Declarations>22 <!-- 将非可视元素（例如服务、值对象）放在此处 -->23 24 25 <fx:Model id="myPhone">26 <!--定义列表控件所需的数据-->27 <states>28 <state label="诺基亚" data=http://www.mamicode.com/"nokia"/>29 <state label="摩托罗拉" data=http://www.mamicode.com/"moto"/>30 <state label="索爱" data=http://www.mamicode.com/"se"/>31 <state label="三星" data=http://www.mamicode.com/"sum"/>32 <state label="Palm" data=http://www.mamicode.com/"pal"/>33 <state label="黑莓" data=http://www.mamicode.com/"bb"/>34 <state label="联想" data=http://www.mamicode.com/"le"/>35 <state label="其他" data=http://www.mamicode.com/"etc"/>36 </states>37 </fx:Model>38 </fx:Declarations>39 40 <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">41 <mx:Label text="选择手机品牌"/>42 <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->43 <mx:List id="source" color="blue" width="100%" height="100%"44 dataProvider="{myPhone.state}"45 rollOverColor="#80FF00" itemClick="itemClickEvent(event)"46 itemRollOut="itemRollEvent(event)"/>47 48 </mx:Panel>49 </s:WindowedApplication>
Flex 列表控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。