Mar 24

设置Flex的TileList控件布局方向（layout direction）的例子

FlexAdd comments

在前面的改变Flex中TileList控件拖动状态（有效/无效）的例子，利用Flex的TileList控件创建一个简单的图片展示（相册）的例子中都说明了TileList控件的一些用法。

接下来的例子演示了如何通过设置direction属性为“horizontal”或“vertical”，来固定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:Script>
  8.         <![CDATA[
  9.             import mx.events.ItemClickEvent;
  10.  
  11.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
  12.                 tileList.direction = evt.item.label;
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:Array id="arr">
  18.         <mx:Object label="horizontal" />
  19.         <mx:Object label="vertical" />
  20.     </mx:Array>
  21.  
  22.     <mx:ArrayCollection id="arrColl">
  23.         <mx:source>
  24.             <mx:Array>
  25.                 <mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" />
  26.                 <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" />
  27.                 <mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" />
  28.                 <mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" />
  29.                 <mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" />
  30.                 <mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" />
  31.                 <mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" />
  32.                 <mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" />
  33.                 <mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" />
  34.             </mx:Array>
  35.         </mx:source>
  36.     </mx:ArrayCollection>
  37.  
  38.     <mx:ApplicationControlBar dock="true">
  39.         <mx:Form styleName="plain">
  40.             <mx:FormItem label="direction:">
  41.                 <mx:ToggleButtonBar id="toggleButtonBar"
  42.                         dataProvider="{arr}"
  43.                         selectedIndex="0"
  44.                         itemClick="toggleButtonBar_itemClick(event);" />
  45.             </mx:FormItem>
  46.         </mx:Form>
  47.     </mx:ApplicationControlBar>
  48.  
  49.     <mx:TileList id="tileList"
  50.             dataProvider="{arrColl}"
  51.             alternatingItemColors="[#FFFFFF,#EEEEEE]"
  52.             columnCount="3"
  53.             columnWidth="100"
  54.             rowCount="2"
  55.             rowHeight="100"
  56.             direction="horizontal"
  57.             horizontalScrollPolicy="on"
  58.             verticalScrollPolicy="on" />
  59.  
  60. </mx:Application>
原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

Leave a Reply