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