Flex ConstraintColumn和constraintRows布局方式

这个新特性是在beta2中就已存在，是在之前版本的基础上改进的，之前的left,right,top,bottom如今在beta2+版本中有了新的定义语法。改变是小的，但作用与意义却非凡。

　　利用flex3的Enhanced Constraints，可以轻松的创建流布局。本例展示如何创建高度自动Shrink的布局，这种布局在博客系统中可以自动根据文章内容的多少调节高度。本文所附源码是用Flex3 beta3编写的，在阅读和使用本实例前，您可能需要安装flex3 beta3，如未请查看从Flex 3 Beta2升级到Beta3的相关问题。

　　打开第一个链接，点击[+display post content]，application高度将自动扩展。大概当您点到第四次的时候，出抛出一个Error，大意是ArgumentError: Error #2025: 提供的 DisplayObject 必须是调用者的子级。选择全部取消，可以继续。我想这可能是flex3 beta3的一个bug。开发中倘用本实例思想，需要在displayTextHandler方法中添加catch error代码。

　　接下来对Enhanced Constraints的简单使用做一下简单介绍：

　　Enhanced Constraints其用意旨在控制布局，在此之前我们用VBox,HBox等进行Parent-child布局。在此之后，我们可以使用EC轻松实现Sibling-relative布局。Flex Coder用ConstraintColumn和ConstraintRow实现EC应用。

<mx:Canvas backgroundColor="0x6699FF" id="c"> 
<mx:constraintColumns> 
    <mx:ConstraintColumn id="col1" width="100" /> 
    <mx:ConstraintColumn id="col2" width="100" /> 
</mx:constraintColumns> 
<mx:constraintRows> 
    <mx:ConstraintRow id="row1" height="100" /> 
    <mx:ConstraintRow id="row2" height="100" /> 
</mx:constraintRows> 

<mx:Button label="Button 1" top="row1:10" bottom="row1:10" left="10"/> 
<mx:Button label="Button 2" left="col2:10" right="col2:10" /> 
<mx:Button label="Button 3" top="row2:10" bottom="row2:10" left="col1:10" right="10" /> 
</mx:Canvas>
　　恐怕以后ConstraintColumn与ConstraintRow是Flex开发者用的最多的两个Tag。在上图代码中：笔者定义了两个ConstraintColumn与两个ConstraintRow，这四者把其父容器Canvas分成四部分，如下图所示：

我们靠这个“表格”定位Cancas内的Button1,Button2,Button3。用控件的top,bottom,left,right属性定义其相对于Column或Row的位置，bottom="row2:10"代表其下边界相对row2的下边界10个单位。依此类推，top="row2:10"代表其下边界相对row2上边界10个单位。left与right类之，不述。

　　在上例代码中，ConstraintColumn与ConstraintRow的width、height属性均是定值，也可以用百分比，如下：

<mx:constraintColumns> 
    <mx:ConstraintColumn id="col1" width="30%" /> 
    <mx:ConstraintColumn id="col2" width="40%" /> 
    <mx:ConstraintColumn id="col3" width="30%" /> 
</mx:constraintColumns> 
<mx:constraintRows> 
    <mx:ConstraintRow id="row1" height="35%" /> 
    <mx:ConstraintRow id="row2" height="55%" /> 
</mx:constraintRows>
　　所有column的百分数之和可以不到100，也可以超出一百。也可以不定义。当最后一项column或row不定义width或height时，其并非占用余下的所有百分比。

　　值得注意的是，ConstraintColumn/ConstraintRow与控件们的resize关系是相互的，换言之，column/row的长宽属性可以控制/影响控件的长宽，反之也可以。这一点很重要，本文所附实例，关于流布局的实现就是就利用这一特征。看如下代码：

<mx:constraintColumns> 
    <mx:ConstraintColumn id="col1" width="100%" /> 
</mx:constraintColumns> 
<mx:constraintRows> 
    <mx:ConstraintRow id="row1" minHeight="40" /> 
    <mx:ConstraintRow id="row2" height="50"/> 
</mx:constraintRows> 
<!--controls--> 
<mx:Text id="postText" htmlText="empty" left="col1:10"  
right="col1:10" top="row1:0" bottom="row1:10" minHeight="30"/> 
<mx:Button label="+display post content" top="row2:10"  
bottom="row2:10" click="displayTextHandler(event)"/>
　　在上面代码中，没有定义row1的height，只定义一个minHeight，保证其最小高度。其row1的高度则实际由postText控制，当postText的内容变化时，会触发resize event，该event会改变row1的高度，这便是ConstraintColumn/ConstraintRow与控件的相互影响性。

评论

1 楼 liuyuanhui0301 2011-08-22  

好用的tag