3.7.为容器指定行和列的约束
3.7.1 问题
你想使用独特的约束性属性成行或者成列地定义独特的子组件，而不是对每个子组件进行定义。
3.7.2 解决办法
在可添加约束条件的地方使用ConstraintRow 和ConstraintColumn 属性来定义容器领域。
3.7.3 讨论
ConstraintRow 和ConstraintColumn 对象让我们可以定义一族用来布置组件的约束条件。
我们使用这些约束条件与使用容器边缘来定义约束条件的方式异曲同工。例如，下面例子的这个句法：left="columnName:10"就将组件布置于距离列的左边10 像素处。
另外，我们可以添加滑动控件让用扩大或缩小分配给每个列的空间大小，从而展示了布局如何随着容器尺寸的变化而变化的，例如：
<mx:ConstraintRow id="row1" height="20%"/>
<mx:ConstraintRow id="row2" height="80%" />
</mx:constraintRows>
<mx:HSlider id="c_slider" change="changeColumnProportion()"
value="5"/>
<mx:HSlider id="r_slider" x="200"
change="changeRowProportion()" value="5"/>
<mx:Text text="{txt}" left="leftCol:0" right="leftCol:0"
top="row2:0" bottom="row2:0"/>
<mx:Text text="{txt}" left="rightCol:0" right="rightCol:0"
top="row2:0" bottom="row2:0"/>
</mx:Canvas>
</mx:Application>
你想使用独特的约束性属性成行或者成列地定义独特的子组件，而不是对每个子组件进行定义。
3.7.2 解决办法
在可添加约束条件的地方使用ConstraintRow 和ConstraintColumn 属性来定义容器领域。
3.7.3 讨论
ConstraintRow 和ConstraintColumn 对象让我们可以定义一族用来布置组件的约束条件。
我们使用这些约束条件与使用容器边缘来定义约束条件的方式异曲同工。例如，下面例子的这个句法：left="columnName:10"就将组件布置于距离列的左边10 像素处。
+展开
-XML
<mx:Canvas>
<mx:constraintColumns>
<mx:ConstraintColumn id="leftCol" width="200"/>
<mx:ConstraintColumn id="rightCol" width="60%"/>
</mx:constraintColumns>
<mx:constraintRows>
<mx:ConstraintRow id="topRow" height="80%"/>
<mx:ConstraintRow id="bottomRow" height="20%"/>
</mx:constraintRows>
<mx:Button label="Click Me" left="leftCol:0" right="leftCol:0"
top="row2:0" bottom="row2:0"/>
</mx:Canvas>
<mx:constraintColumns>
<mx:ConstraintColumn id="leftCol" width="200"/>
<mx:ConstraintColumn id="rightCol" width="60%"/>
</mx:constraintColumns>
<mx:constraintRows>
<mx:ConstraintRow id="topRow" height="80%"/>
<mx:ConstraintRow id="bottomRow" height="20%"/>
</mx:constraintRows>
<mx:Button label="Click Me" left="leftCol:0" right="leftCol:0"
top="row2:0" bottom="row2:0"/>
</mx:Canvas>
另外，我们可以添加滑动控件让用扩大或缩小分配给每个列的空间大小，从而展示了布局如何随着容器尺寸的变化而变化的，例如：
+展开
<mx:constraintRows>-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var txt:String = "Cort¨￠zar is highly regarded as a
master of short stories of a fantastic bent, with the
collections Bestiario (1951)" +
" and Final de Juego (1956) containing many of his best
examples in the genre, including the remarkable
\"Continuidad de los Parques\"" +
" and \"Axolotl.\" These collections received early
praise from ¨￠lvaro Cepeda Samudio, and selections from
the two volumes were published"" in 1967 in English
translations by Paul Blackburn, under the title
End of the Game and Other Stories (in later editions, Blow-Up and
" +
"Other Stories, in deference to the English title of
Antonioni's
celebrated film of 1966 of Cort¨￠zar's story Las babas del
diablo).";
private function changeColumnProportion():void
{
this.leftCol.percentWidth = (10*c_slider.value);
this.rightCol.percentWidth = 100 -
(10*c_slider.value);
}
private function changeRowProportion():void
{
this.row1.percentHeight = (10*r_slider.value);
this.row2.percentHeight = 100 -
(10*r_slider.value);
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:constraintColumns>
<mx:ConstraintColumn id="leftCol" width="50%" />
<mx:ConstraintColumn id="rightCol" width="50%" />
</mx:constraintColumns>
<mx:Script>
<![CDATA[
[Bindable]
public var txt:String = "Cort¨￠zar is highly regarded as a
master of short stories of a fantastic bent, with the
collections Bestiario (1951)" +
" and Final de Juego (1956) containing many of his best
examples in the genre, including the remarkable
\"Continuidad de los Parques\"" +
" and \"Axolotl.\" These collections received early
praise from ¨￠lvaro Cepeda Samudio, and selections from
the two volumes were published"" in 1967 in English
translations by Paul Blackburn, under the title
End of the Game and Other Stories (in later editions, Blow-Up and
" +
"Other Stories, in deference to the English title of
Antonioni's
celebrated film of 1966 of Cort¨￠zar's story Las babas del
diablo).";
private function changeColumnProportion():void
{
this.leftCol.percentWidth = (10*c_slider.value);
this.rightCol.percentWidth = 100 -
(10*c_slider.value);
}
private function changeRowProportion():void
{
this.row1.percentHeight = (10*r_slider.value);
this.row2.percentHeight = 100 -
(10*r_slider.value);
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:constraintColumns>
<mx:ConstraintColumn id="leftCol" width="50%" />
<mx:ConstraintColumn id="rightCol" width="50%" />
</mx:constraintColumns>
<mx:ConstraintRow id="row1" height="20%"/>
<mx:ConstraintRow id="row2" height="80%" />
</mx:constraintRows>
<mx:HSlider id="c_slider" change="changeColumnProportion()"
value="5"/>
<mx:HSlider id="r_slider" x="200"
change="changeRowProportion()" value="5"/>
<mx:Text text="{txt}" left="leftCol:0" right="leftCol:0"
top="row2:0" bottom="row2:0"/>
<mx:Text text="{txt}" left="rightCol:0" right="rightCol:0"
top="row2:0" bottom="row2:0"/>
</mx:Canvas>
</mx:Application>
加支付宝好友偷能量挖...
