v1_12 Laying out components in containers? flex在容器中布局组件
?
ex1_05
?
四个Flex框架布局类:BasicLayout HorizontalLayout TileLayout VerticalLayout
BasicLayout :将基于x和y绝对属性显示容器中的所有内容
HorizontalLayout :将所有内容水平方向彼此相邻放置 (忽略x y属性设置)
TileLayout :将并列显示容器中的所有子内容
VerticalLayout将所有子内容彼此在垂直方向布置 (忽略x y属性设置)
?
使用s:layout引用layout
<s:layout>
<s:BasicLayout/>
</s:layout>
?从面向对象编程的角度来看,您可以说Application类有一个名为布局的属性,该属性的值是另一个类BasicLayout的一个实例
?
默认情况下,应用程序容器实现BasicLayout类以布局它的子内容
此类使用绝对定位,要求每个子类指定一个基于容器左上角的原点 0,0点的x,y属性
?
TileLayout 它在一个或多个垂直列或水平上布置它的子内容,这些行或列基于一个名为方向的属性.如果要一个列布局,方向属性有效值为列;如果要一个行布局,方向属性有效值为行.
默认方向是行
一个排列模板布局中的所有单元有相同的调度和宽度,这两个值分别基于最高的子行和最宽的子列
?
?
这部分Layout应用于容器中,容器是一个可视化对象层次结构的一部分,因为容器可以容纳其他组件,包括控件和其他容器
有七个可分成两类的可用spark容器
?
没有可视化皮肤的容器
Group,DataGroup容器没有任何可视化皮肤应用于它们的容器,如果只需要一个容器存放内容,但本身并不需要一个可视化的皮肤,那么就可以选择Group容器或DataGroup容器并保存初始化任何可视元素的开销
?
有可视化皮肤的容器
SkinnableContainer? SkinableDataContainer Panel? Application BorderContainer
而这其中只有panel是有默认皮肤的,其它四个容器需要自己添加样式或应用一个皮肤类来给它们一个外观
?
OK,继续看例子
这是目前的状况layout布局,把lable也包括进去了
?使用Group将components是包起来,作为整体来布局,而在Group内部又可以使用自己的layout
子内容的实际布局,取决于分配给Group容器的布局类
?
?
BorderContainer类是放置在Group容器周围的SkinnableContainer类的一个子类
?示例代码如下
<s:BorderContainer borderColor="#0b85b7"
cornerRadius="8"
borderWeight="4">
<s:Group id="employeeGroup"
height="300" width="250">
<!--
The layout property here is a property of the Group container.
Its value is the TileLayout class, which directs the Group container
to lay out all of its child UI elements, in this case the EmployeeDisplay
custom component instances, in a tiled layout.
-->
<s:layout>
<s:TileLayout/>
</s:layout>
<components:EmployeeDisplay empImage="images/bvanbrocklin.jpg"
empName="Brad VanBrocklin"
empTitle="Instructional Designer"
y="46"/>
<components:EmployeeDisplay empImage="images/abrilliam.jpg"
empName="Andrew Brilliam"
empTitle="Senior Hardware Engineer"
x="138" y="157"/>
<components:EmployeeDisplay empImage="images/akotter.jpg"
empName="Annette Kotter"
empTitle="Vice President of Market Development"
x="267" y="267"/>
<components:EmployeeDisplay empImage="images/rcrawley.jpg"
empName="Rosco Crawley"
empTitle="Regional Manager"
x="413" y="378"/>
<components:EmployeeDisplay empImage="images/mfields.jpg"
empName="Mark Fields"
empTitle="Graphic Designer"
y="46"/>
<components:EmployeeDisplay empImage="images/jproctor.jpg"
empName="Jeff Proctor"
empTitle="Sales Manager"
x="138" y="157"/>
<components:EmployeeDisplay empImage="images/twong.jpg"
empName="Tim Wong"
empTitle="President of Human Resource Development"
x="267" y="267"/>
<components:EmployeeDisplay empImage="images/ptranep.jpg"
empName="Paul Tranep"
empTitle="Technical Support"
x="413" y="378"/>
</s:Group>
<s:Scroller viewport="{employeeGroup}"/>
</s:BorderContainer>
?