Flex中如何在List控件中添加图标(icon)使每个项目都显示相应图标的例子

By Minidxer | July 26, 2008

接下来的例子演示了Flex中如何在List控件中添加图标(icon)使每个项目都显示相应图标。本例中还利用了textIndent样式来填充List中的标签使得图片与文本距离比较恰当。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整实现代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             [Embed(source="assets/bulletCheck.png")]
  11.             public var BulletCheck:Class;
  12.  
  13.             [Bindable]
  14.             [Embed(source="assets/bulletWarning.png")]
  15.             public var BulletWarning:Class;
  16.  
  17.             [Bindable]
  18.             [Embed(source="assets/bulletCritical.png")]
  19.             public var BulletCritical:Class;
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:List id="list"
  24.             labelField="label"
  25.             iconField="icon"
  26.             rowCount="4"
  27.             width="200"
  28.             themeColor="haloSilver"
  29.             textIndent="5">
  30.         <mx:dataProvider>
  31.             <mx:Array>
  32.                 <mx:Object label="Item 1" icon="BulletWarning" />
  33.                 <mx:Object label="Item 2" icon="BulletCritical" />
  34.                 <mx:Object label="Item 3" icon="BulletCritical" />
  35.                 <mx:Object label="Item 4" icon="BulletCheck" />
  36.                 <mx:Object label="Item 5" icon="BulletWarning" />
  37.                 <mx:Object label="Item 6" icon="BulletCheck" />
  38.                 <mx:Object label="Item 7" icon="BulletCheck" />
  39.                 <mx:Object label="Item 8" icon="BulletCritical" />
  40.             </mx:Array>
  41.         </mx:dataProvider>
  42.     </mx:List>
  43.  
  44.     <mx:HBox>
  45.         <mx:Button label="Success"
  46.                 icon="{BulletCheck}"
  47.                 mouseEnabled="false"
  48.                 skin="{null}" />
  49.  
  50.         <mx:Button label="Warning"
  51.                 icon="{BulletWarning}"
  52.                 mouseEnabled="false"
  53.                 skin="{null}" />
  54.  
  55.         <mx:Button label="Critical"
  56.                 icon="{BulletCritical}"
  57.                 mouseEnabled="false"
  58.                 skin="{null}" />
  59.     </mx:HBox>
  60.  
  61. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , ,

Related Post

2 comments | Add One

  1. ZUER - 07/26/2008 at 11:38 am

    想在贵站买广告，有意请加QQ：281556655

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads