Flex 列表控件中的操作

主要操作包括：显示提示，使用图标，编辑列表条目中数据。

1.使用数据提示：

当鼠标停留在条目上时，可以显示该条目的相关数据提示。

当利用滚动条时，可以显示滚动条的相关提示。

在列表控件中使用showDataTips和showScrollTips属性指明是否显示条目提示和滚动条提示。

 <?xml version="1.0" encoding="utf-8"?>
 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
     <fx:Script>
         <![CDATA[

             //定义数据条目显示的内容，在列表控件中，该方法只有一个参数，为当前的数据条目

         private function myDataTipFunction(item:Object):String
         {
            return "您查看的内容为:"+item.label+item.data;
         }

         /*
             定义滚动条显示的提示内容，该方法包括2个参数
             direction为滚动条的方向
             position为滚动条离控件顶端的距离
         */
             private function scrollTipFunction(direction:String,position:Number):String
             {
               if(direction == "vertical")
                   return "查看剩余条目"
               else
                   return "";

             }

         ]]>
     </fx:Script>

     <fx:Declarations>
         <!-- 将非可视元素（例如服务、值对象）放在此处 -->

     <fx:Model id="myPhone">
         <!--定义列表控件所需的数据-->
         <states>
             <state label="诺基亚" data="nokia"/>
             <state label="摩托罗拉" data="moto"/>
             <state label="索爱" data="se"/>
             <state label="三星" data="sum"/>
             <state label="Palm" data="pal"/>
             <state label="黑莓" data="bb"/>
             <state label="联想" data="le"/>
             <state label="其他" data="etc"/>
         </states>
     </fx:Model>
 </fx:Declarations>

     <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
         <mx:Label text="选择手机品牌"/>
         <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->
         <mx:List id="source" color="blue" width="100%" height="100%"
                        dataProvider="{myPhone.state}"
                         rollOverColor="#80FF00" showDataTips="true"
                         showScrollTips="true" dataTipFunction="myDataTipFunction" scrollTipFunction="scrollTipFunction"/>

     </mx:Panel>
 </s:WindowedApplication>

效果如图：

  

2.在列表控件中使用图标

在列表控件中可以使用iconField和iconFunction属性定义图标相关的属性以及方法。

 <?xml version="1.0" encoding="utf-8"?>
 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
     <fx:Script>
         <![CDATA[
             //定义条目中所使用的图标
             [Embed(source="assets/mm-icon.png") ]
             public var iconSymbol:Class;

         ]]>
     </fx:Script>

     <fx:Declarations>
         <!-- 将非可视元素（例如服务、值对象）放在此处 -->

     <fx:Model id="myPhone">
         <!--定义列表控件所需的数据-->
         <states>
             <state label="诺基亚" data="nokia" myIcon="iconSymbol"/>
             <state label="摩托罗拉" data="moto" myIcon="iconSymbol"/>
             <state label="索爱" data="se" myIcon="iconSymbol"/>
             <state label="三星" data="sum" myIcon="iconSymbol"/>
             <state label="Palm" data="pal" myIcon="iconSymbol"/>
             <state label="黑莓" data="bb" myIcon="iconSymbol"/>
             <state label="联想" data="le" myIcon="iconSymbol"/>
             <state label="其他" data="etc" myIcon="iconSymbol"/>
         </states>
     </fx:Model>
 </fx:Declarations>

     <mx:Panel title="列表控件例子" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340">
         <mx:Label text="选择手机品牌"/>
         <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->
         <mx:List id="source" color="blue" width="100%" height="100%"
                        dataProvider="{myPhone.state}"
                         rollOverColor="#80FF00" iconField="myIcon"/>

     </mx:Panel>
 </s:WindowedApplication>

iconField="myIcon"：指明条目的图标由数据中的myIcon属性提供。

3.编辑列表条目中数据

编辑列表中的数据时，需要将editable属性设置为true。

 <?xml version="1.0" encoding="utf-8"?>
 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx" fontSize="14">
     <fx:Script>
         <![CDATA[
             //定义条目中所使用的图标

             import mx.events.ListEvent;
             //鼠标单击时触发的事件条目处于可编辑状态
             private function itemEditBegin(event:ListEvent):void
             {
               state.text="当前状态为：可以编辑数据";
             }
             //当编辑完条目，鼠标单击其他区域时触发的事件，条目处于编辑状态完成
             private function itemEditEnd(event:ListEvent):void
             {
               state.text="当前状态为:完成编辑数据";
             }

             //当单击条目时，显示条目显示的标签，在编辑后单击标签，显示更新后的标签值
             private function showType(event:ListEvent):void
             {
               typee.text = event.target.selectedItem.label;
             }

         ]]>
     </fx:Script>

     <fx:Declarations>
         <!-- 将非可视元素（例如服务、值对象）放在此处 -->

     <fx:Model id="myPhone">
         <!--定义列表控件所需的数据-->
         <states>
             <state label="诺基亚" data="nokia" />
             <state label="摩托罗拉" data="moto" />
             <state label="索爱" data="se" />
             <state label="三星" data="sum" />
             <state label="Palm" data="pal" />
             <state label="黑莓" data="bb" />
             <state label="联想" data="le" />
             <state label="其他" data="etc" />
         </states>
     </fx:Model>
 </fx:Declarations>

     <mx:Panel title="xianshitubiao" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" width="340" height="316">
         <mx:Label text="选择手机品牌"/>
         <!--定义列表控件，数据提供器为myPhone中state的内容，控件自动读取label标签内容显示-->
         <mx:List id="source" color="blue" width="100%" height="100%"
                        dataProvider="{myPhone.state}"
                         rollOverColor="#80FF00" editable="true" itemEditBeginning="itemEditBegin(event)"
                         itemEditEnd="itemEditEnd(event)" itemClick="showType(event)"
                         />
         <mx:Label id="state"/>
         <mx:Label id="typee"/>

     </mx:Panel>
 </s:WindowedApplication>

效果如图：