Flex中通过horizontalGap和verticalGap样式调整Tile容器横向间隔和竖向间隔的例子
By Minidxer | August 3, 2008
接下来的例子演示了Flex中如何通过horizontalGap和verticalGap样式，调整Tile容器横向间隔和竖向间隔。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码(或点击这里察看)：
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:ApplicationControlBar dock="true">
- <mx:Label text="horizontalGap:" />
- <mx:HSlider id="hGap"
- minimum="0"
- maximum="10"
- value="2"
- liveDragging="true"
- snapInterval="1"
- tickInterval="2"
- dataTipPrecision="0" />
- <mx:Spacer width="100" />
- <mx:Label text="verticalGap:" />
- <mx:HSlider id="vGap"
- minimum="0"
- maximum="10"
- value="2"
- liveDragging="true"
- snapInterval="1"
- tickInterval="2"
- dataTipPrecision="0" />
- </mx:ApplicationControlBar>
- <mx:Tile id="tile"
- backgroundColor="haloSilver"
- tileHeight="50"
- tileWidth="50"
- verticalGap="{vGap.value}"
- horizontalGap="{hGap.value}">
- <mx:Button label="1" width="100%" height="100%" />
- <mx:Button label="2" width="100%" height="100%" />
- <mx:Button label="3" width="100%" height="100%" />
- <mx:Button label="4" width="100%" height="100%" />
- <mx:Button label="5" width="100%" height="100%" />
- <mx:Button label="6" width="100%" height="100%" />
- <mx:Button label="7" width="100%" height="100%" />
- </mx:Tile>
- </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子
Topics:
Flex |
Tags: horizontalGap, Tile, verticalGap, 横向间隔, 竖向间隔