how to use flex layouts

当 我们新建一个flex应用的时候默认的布局方式就是绝对定位(layout="absolute")，这里的"absolute"CSS里的一样，任何控 件或者容器都是依据x,y坐标来定位的，你对组件有绝对的控制权，你想让多个组件重叠在一起显示都没问题，如果你有使用过Fireworks或者是 Flash你可以将这个<MX:Application>想像成画布一样的东西。
      打开Flex Builder切换到设计模式，现在我们可以设计界面了，很简单咯，直接选择一个控件，拖放到画布上，设置一下在大小，嗯 ，就OK了。

如图我在画布(500px*500px)的右下角上放了一个按钮，在x=425,y=468的位置。

1. < Button       
2.   
3.     x="425"       
4.   
5.     y="468" /> 
   

大多数时候，我们希望应用程序能自适应屏幕大小，不管整个窗口如何变化多端，按钮都能使终处在右下角的位置，这种情况下可以使用强制约束布局的方式，如图：

1. < Button       
2.   
3.     right="10"   
4.   
5.     bottom="10" />  
   

不管整个应用的窗口（浏览器...）如何变化，按钮将将使终被固定在离窗体右边10px,窗体底部10px的地方。

 

Using Layout Containers

在实现的应用当中，我们经常需要在动态的，添加，删除各种组件元素，这个时候就需要考虑使用 Flex 中的容器组件，像是： HBox,VBox,Panel 等等。这些个容器，主要的作用就是指出，元素之前的排列关系，代替这前提到的用 X,Y 的绝对定位布局方式。 Hbox 是 "Horizonal Box" 的缩写，意思就是容器内的元素以水平的方式排列， VBox 当然是以垂直的方式来排列元素， Panel 内的元素可以选择的排序方式就多了 horizonally, vertically, absolutely ，都可以，而且它还自带了一个标题栏。 Flex 里当然不止这么几个容器组件，比如说 Grid 以表格的方式来排列元素， Form 就像 html 中的 Form 用来接受用户的输入 …... 关于容器的详细介绍你可以看这里 ( http://livedocs.adobe.com/flex/3/html/containers_intro_1.html ) ，容器就是帮助你更好的排列各种组件的，比你手动一个个的去设置各个组件 X,Y 坐标方便多了。

 

Using Layout Controls

这 类组件在布局的时候起一些辅助作用，<mx:Spacer/>看它的名字就晓得，这是一个空白组件，虽然也有width,hieght等属 性，但是不会显示，是用来占位的，比如说将两个靠得太紧的控件对象，分开一点。还有就是<mx:HRule/>，<mx:VRule />用来显示一条水平或垂直的直线。像是你需要在Form里区分一下不同的区域，要以用这个。

Diagramming Your Layout

在我们开发这前，画个大概的草图是很有必要的，做过div+css的同学应该很有经验，这样一是可以帮助你节省时间，二是可以帮助你精简代码（有可能会添加一些不必要容器，或者是组件）

1. package  {  
2.   
3. App     
4.   
5.         -header (centered, 800px wide)      
6.   
7.         -body (centered, 800px wide)     
8.   
9.             -content (left aligned)     
10.   
11.             -ads (right, stacked vertically, 200px wide) 
    

变成草图就是这个样子：

实际的MXML:

1. <Application      
2.   
3.     layout="vertical"       
4.   
5.     horizontalAlign="center"       
6.   
7.     width="800" >    
8.   
9.     <YourHeader width="800" />    
10.   
11.     <HBox>    
12.   
13.         <YourContent width="600" />    
14.   
15.         <VBox>    
16.   
17.             <Ad width="200" />    
18.   
19.             <Ad width="200" />    
20.   
21.         </VBox>    
22.   
23.     </HBox>    
24.   
25. </Application>  
    

上面的所有的控件对象的大小都是直接设置的像素值，如果你想整个界面变得更有弹性点呢，可以改成百分比的表达试，这样整个界面就会自适应大小了，但是叫，在有些情景下：你觉得YourContent 部分最大只能到600px，不然会影响整个应用的美观，便是直接宽度成600px，又会让失去百分比所带来的弹性，杂个办呢？我们可以使用一个叫“ maxWidth”的属性来解决这个问题，“ maxWidth=600”的意思就是引个对象的最大宽度只能到600px，随便你外部窗体的大小怎么变化，反正 YourContent的最大宽度只能是600px。

这里有一个原则性的问题，需要你注意，尽量减少容器的嵌套使用，为了应用的性能考虑，比较下面三种实现，虽然实现的效果是一样的，但是很显示第三个的代码更简洁一些：

1. <Application layout="absolute" >    
2.   
3.     <HBox width="100%" >    
4.   
5.         <Button  label= "Left" />    
6.   
7.         <Spacer width="100%" />    
8.   
9.         <Button  label= "Left" />    
10.   
11.     </HBox>    
12.   
13. </Application> 
    

 

1.   
2. <Application layout="horizontal" >    
3.   
4.     <Button  label= "Left" />    
5.   
6.     <Spacer width="100%" />    
7.   
8.     <Button  label= "Left" />    
9.   
10. </Application> 
    

 

1. <Application layout="absolute" >    
2.   
3.     <Button  label= "Left"  left= "5" />    
4.   
5.     <Button  label= "Left"  right= "5" />    
6.   
7. </Application>
   

 

Using Percentage-based Sizes

最 后来说一下最让人头痛的如何i为组件设置合适大小的问题：如如果有两个，或者更多的组件对象在一个HBox,VBox，或者是其它的容器组件内，而且使用 的%的方式设置其各自的宽度，它们会相互争夺空白的空间，比如说，对于两个组件对象将宽度设定为100 ％ ，其实际的效果各占外层容器空间的50 ％，规制对 下面的这种情况也同样适用，一个button的控件的对象宽度设置成35px,别外的一个albel控件的宽度设置为100%,实现的效果，label的 宽度应该是外层容器的宽度减去35px，像label这类控件还有个问题，可见域通常比你设置的宽度要小，就是看起来，好像没有达到你设置的宽度，其实宽 度是达到你的要求的(TTM绕了)。
上面说了，控件对象的大小其实是跟外壳父容器大小是相关的(使用%方式的时候)，如果外层父容器没有明确的设置大小呢？子控件对象大小如果设置的%比的 值，其实是没有意义的，控件会按最小需求来显示。所以如果你是使用%的来设置控件对象的大小，那你有必要保证，它的外层父容器有显示的设置大小。
如果你使用%的方式设置控件对象的宽度：不设置控件对象的大小，会使用控件的默认大小(设置了当然就不用说了)，如果控件太大，超过外层容器的大小，容器 的滚动条就出来了。额，如果 是使用像素值的方式设置控件对象的宽度：外层容器没有显示的设置过宽度，那外层容器的大小是随着内部控件的大小一起变化的，也就说不存在会不会超过外层容 器大小的说法，意味着滚动条一直不会出现，当然你有显示设置外层容器的大小，控件的大小超过的话，滚动条照样会出现，试试下面这两个例子会更容易理解：

1. <Panel width="200" >    
2.   
3.     <Image width="400" />    
4.   
5. </Panel>   
   

会出现滚动条

1. <Panel>    
2.   
3.     <Image width="400" />    
4.   
5. </Panel>   
   

这个就不会出现滚动条
还有一点需要注意，外层容器没有显示的设置大小的话，你将不能使用类的属性Align，用了也白用！
还是例子，试一下就明白了：

1. <VBox width="100%" >    
2.   
3.     <HBox horizontalAlign="center"  width= "100%" >    
4.   
5.         <Button />    
6.   
7.     </Hbox>    
8.   
9. </VBox> 
   

然后 你去掉宽度再看看

Conclusion

好了就这么多了，关键还是要多练习！自然就明白了！其实没那么困难！

评论

1 楼 guzen 2009-06-09  

可以用一下flash builder 4，现在支持绝对定位了，不用   <Spacer width="100%" />     来补位了。