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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值