Flex中如何创建一个具有良好排序效果的TileList的例子

By Minidxer | October 9, 2008

接下来的例子演示了Flex中如何创建一个具有良好排序效果的TileList。

让我们先来看一下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:DefaultTileListEffect id="myTileListEffect"
  8.             fadeOutDuration="500"
  9.             fadeInDuration="500"
  10.             moveDuration="1500" />
  11.  
  12.     <mx:ArrayCollection id="arrColl">
  13.         <mx:source>
  14.             <mx:Array>
  15.                 <mx:Object source="assets/Accordion.png"
  16.                         label="Accordion" />
  17.                 <mx:Object source="assets/ApplicationControlBar.png"
  18.                         label="ApplicationControlBar" />
  19.                 <mx:Object source="assets/Box.png"
  20.                         label="Box" />
  21.                 <mx:Object source="assets/Button.png"
  22.                         label="Button" />
  23.                 <mx:Object source="assets/ButtonBar.png"
  24.                         label="ButtonBar" />
  25.                 <mx:Object source="assets/CheckBox.png"
  26.                         label="CheckBox" />
  27.                 <mx:Object source="assets/ColorPicker.png"
  28.                         label="ColorPicker" />
  29.                 <mx:Object source="assets/ComboBox.png"
  30.                         label="ComboBox" />
  31.                 <mx:Object source="assets/DataGrid.png"
  32.                         label="DataGrid" />
  33.                 <mx:Object source="assets/DateChooser.png"
  34.                         label="DateChooser" />
  35.                 <mx:Object source="assets/DateField.png"
  36.                         label="DateField" />
  37.                 <mx:Object source="assets/HorizontalList.png"
  38.                         label="HorizontalList" />
  39.                 <mx:Object source="assets/HRule.png"
  40.                         label="HRule" />
  41.             </mx:Array>
  42.         </mx:source>
  43.     </mx:ArrayCollection>
  44.  
  45.     <mx:TileList id="tileList"
  46.             dataChangeEffect="{myTileListEffect}"
  47.             dataProvider="{arrColl}"
  48.             itemRenderer="TileListItemRenderer"
  49.             dragEnabled="true"
  50.             dropEnabled="true"
  51.             dragMoveEnabled="true"
  52.             columnWidth="100"
  53.             rowHeight="100"
  54.             width="100%"
  55.             height="100%" />
  56.  
  57. </mx:Application>

下面是TileListItemRenderer.mxml代码：

Download: TileListItemRenderer.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         styleName="plain"
  4.         verticalAlign="middle"
  5.         horizontalAlign="center"
  6.         horizontalScrollPolicy="off"
  7.         verticalScrollPolicy="off"
  8.         width="100%"
  9.         height="100%">
  10.  
  11.     <mx:Image source="{data.source}" />
  12.     <mx:Label text="{data.label}"
  13.             truncateToFit="true"
  14.             width="96" />
  15.  
  16. </mx:VBox>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: TileList | 1 Comment » | 2,381 views Tags: , ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. hark - 10/16/2009 at 5:19 pm

    demo链错了。。。

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll