Flex中如何通过horizontalGap样式调整HDividedBox容器中两个子项横向填充内容的例子

By Minidxer | September 23, 2008

接下来的例子演示了Flex中如何通过horizontalGap样式，调整HDividedBox容器中两个子项横向填充内容。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="HDividedBox_horizontalGap_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:ApplicationControlBar dock="true">
  9.         <mx:Form styleName="plain">
  10.             <mx:FormItem label="horizontalGap:"
  11.                     direction="horizontal">
  12.                 <mx:HSlider id="slider"
  13.                         minimum="6"
  14.                         maximum="20"
  15.                         value="10"
  16.                         snapInterval="1"
  17.                         tickInterval="1"
  18.                         liveDragging="true" />
  19.                 <mx:Label text="{slider.value}" />
  20.             </mx:FormItem>
  21.         </mx:Form>
  22.     </mx:ApplicationControlBar>
  23.  
  24.     <mx:HDividedBox id="dividedBox"
  25.             horizontalGap="{slider.value}"
  26.             width="100%"
  27.             height="100%">
  28.         <mx:Box id="box1"
  29.                 backgroundColor="haloGreen"
  30.                 width="100%"
  31.                 height="100%"
  32.                 minWidth="100" />
  33.         <mx:Box id="box2"
  34.                 backgroundColor="haloBlue"
  35.                 width="100%"
  36.                 height="100%"
  37.                 minWidth="100" />
  38.     </mx:HDividedBox>
  39.  
  40. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: HDividedBox | No Comments » | 167 views Tags: ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll