Flex in Action读书笔记（4. Layout and containers）

4. Layout and containers


4.1 Absolute layout
将layout设置为absolute后，原点坐标[0,0]从屏幕左上角开始，向右x增加，向下y增加。

4.2 Constraint-based layout

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
           backgroundColor="white">
 <mx:Canvas width="100%" height="100%">
  <mx:constraintColumns>
    <mx:ConstraintColumn id="col1" width="100"/>
  </mx:constraintColumns>
  <mx:constraintRows>
   <mx:ConstraintRow id="row1" height="50"/>
   <mx:ConstraintRow id="row2" height="50"/>
  </mx:constraintRows>
  <mx:Button label="Button 1" left="col1:0" right="col1:0"
                      top="row1:0" bottom="row1:0"/>
  <mx:Button label="Button 2" left="col1:10" right="col1:10"
                      top="row2:0" bottom="row2:0"/>
 </mx:Canvas>
</mx:Application>

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundColor="white">
 <mx:Canvas width="100%" height="100%">
  <mx:constraintColumns>
   <mx:ConstraintColumn id="col1"/>
   <mx:ConstraintColumn id="col2"/>
  </mx:constraintColumns>
  <mx:constraintRows>
   <mx:ConstraintRow id="row1" height="50"/>
   <mx:ConstraintRow id="row2" height="30"/>
  </mx:constraintRows>
  <mx:Button label="Button 1" left="col1:0" top="row1:0" width="200" />
  <mx:Button label="Button 2" left="col1:0" top="row2:0"/>
  <mx:Button label="Button 3" left="col2:0"/>
 </mx:Canvas>
</mx:Application>

 

4.3 Automatic layout
horizontal/vertical

4.4 Variable and fixed sizing
控件的width或者height既可以设置为百分比，也可以设置为固定像素。

4.5 Containers
Container包括
  1. Application container
    *从custom控件调用Application控件变量myString

<?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Button label="{mx.core.Application.application.myString}"/>
</mx:Canvas>  

   2. Canvas container

    *使用Canvas时要注意，在一个Canvas中放置多个控件必须指定它们的坐标，否则这些控件可能重叠。 
  3. Box, HBox, VBox container
    HBox：水平放置
    VBox：垂直放置
    Box：默认放置，同Application.layout 
  4. Panel container
    Panel中可以设置layout 
  5. ApplicationControlBar, ControlBar container
    ApplicationControlBar一般位于Application的顶部；
    ControlBar可以位于Panel的底部 
  6. DividedBox, HDivideBox, VDividedBox containers   
  7. Form container
    Form container包括三个主要标记：Form（主窗体）, FormHeader（标题）, FormItem（数据输入项）
  8. Grid container
    类似HTML中的Tabel
  9. Tile container
    自动排列内部组件的容器，很实用

4.6 Dynamic layout with Repeaters
    Repeater控件用于在运行时加载数据。
    1. Repeater.dataProvider
        ArrayCollection
    2. Repeater的Properties和Event
    Properties;
    id dataProvider startingIndex count currentIndex currentItem recycleChildren
    三个常用Event:
    repeat repeatStart repeatEnd