Flex中调整Tile容器内部布局的例子

By Minidxer | August 3, 2008

接下来的例子演示了Flex中如何调整Tile容器内部布局。本例中使用了两个slider控件来调整tileWidth和tileHeight属性。由于显示宽度限制，完整的显示可以通过点击Demo进行察看。

让我们先来看一下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:Style>
  8.         Tile {
  9.             paddingLeft: 10;
  10.             paddingRight: 10;
  11.             paddingTop: 10;
  12.             paddingBottom: 10;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:ApplicationControlBar dock="true">
  17.         <mx:Label text="direction:" />
  18.         <mx:ComboBox id="comboBox">
  19.             <mx:dataProvider>
  20.                 <mx:String>{mx.containers.TileDirection.HORIZONTAL}</mx:String>
  21.                 <mx:String>{mx.containers.TileDirection.VERTICAL}</mx:String>
  22.             </mx:dataProvider>
  23.         </mx:ComboBox>
  24.  
  25.         <mx:Spacer width="50%" />
  26.  
  27.         <mx:Label text="tileWidth ({tileW.value}):" />
  28.         <mx:HSlider id="tileW"
  29.                 minimum="30"
  30.                 maximum="90"
  31.                 value="30"
  32.                 liveDragging="true"
  33.                 snapInterval="5"
  34.                 tickInterval="10"
  35.                 dataTipPrecision="0" />
  36.  
  37.         <mx:Spacer width="50%" />
  38.  
  39.         <mx:Label text="tileHeight ({tileH.value}):" />
  40.         <mx:HSlider id="tileH"
  41.                 minimum="30"
  42.                 maximum="60"
  43.                 value="30"
  44.                 liveDragging="true"
  45.                 snapInterval="5"
  46.                 tickInterval="10"
  47.                 dataTipPrecision="0" />
  48.     </mx:ApplicationControlBar>
  49.  
  50.     <mx:Tile backgroundColor="haloSilver"
  51.             direction="{comboBox.selectedItem}"
  52.             tileWidth="{tileW.value}"
  53.             tileHeight="{tileH.value}">
  54.         <mx:Button label="1" width="100%" height="100%" />
  55.         <mx:Button label="2" width="100%" height="100%" />
  56.         <mx:Button label="3" width="100%" height="100%" />
  57.         <mx:Button label="4" width="100%" height="100%" />
  58.         <mx:Button label="5" width="100%" height="100%" />
  59.         <mx:Button label="6" width="100%" height="100%" />
  60.         <mx:Button label="7" width="100%" height="100%" />
  61.     </mx:Tile>
  62.  
  63. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads