<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Panel width="400" height="400" title="Panle" symbolColor="#BA27A3">
<s:layout>
<s:VerticalLayout horizontalAlign="left"/>
<!--<s:HorizontalLayout paddingTop="60"/>-->
</s:layout>
<s:VGroup width="203" height="177" contentBackgroundColor="#931B1B">
<s:Button width="200" label="tesing1" />
<s:Button width="200" label="tesing2" />
<s:Button width="200" label="tesing3" />
</s:VGroup>
<s:VGroup width="203" height="177" contentBackgroundColor="#1920A6" contentBackgroundAlpha="0.0" chromeColor="#620C0C" focusColor="#1B7AD2">
<s:Button width="200" label="tesing1" />
<s:Button width="200" label="tesing2" />
<s:Button width="200" label="tesing3" />
</s:VGroup>
<s:HGroup width="200" height="200">
<s:Button width="200" label="tesing1" />
<s:Button width="200" label="tesing2" />
<s:Button width="200" label="tesing3" />
</s:HGroup>
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%">
<s:Button width="200" label="tesing1" />
<s:Button width="200" label="tesing2" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing3" />
<s:Button width="200" label="tesing19" />
<s:Button width="200" label="tesing20" />
</s:VGroup>
</s:Scroller>
</s:Panel>
</s:Application>
- 1.四种布局概述
- 在Flex SDK 4(Gumbo)的spark组件库里面增加了一个page:spark.layouts。
- 其中包括了比较重要的四个布局class,分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout
- 1、BasicLayout:(默认属性,当不指定定位后,则是绝对定位布局)
- 这是spark组件默认Flex SDK 3的布局方式,即绝对定位布局。
- 在Flex SDK 3 里面对应的是:layout="absolute"
- 2、HorizontalLayout:
- 这是spark组件库里面的水平布局方式。
- 在里面对应的是:layout="horizontal"
- 3、VerticalLayout:
- 这是spark组件库里面的竖直布局方式。
- 在Flex SDK 3 里面对应的是:layout="vertical"
- 4、TileLayout:
- 这是spark组件库新增的布局方式,即格子布局方式。
- TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。
- 还有一点是需要注意的:
- paddingLeft、paddingRight、paddingTop、paddingBottom
- 这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与Flex SDK 3有些区别。也就是说,在spark组件中的容器,已经不具备paddingLeft、paddingRight、paddingTop、 paddingBottom属性了。
- 2.spark组件中比较常见的容器
- 1、Group:
- 相当于Canvas、默认是BasicLayout方式)
- 2、HGroup:
- 相当于HBox,因此只有一种布局方式:HorizontalLayout布局。
- 3、VGroup:
- 相当于VBox,因此只有一种布局方式:VerticalLayout布局。
- 4、Panel:
- 与Flex SDK 3的Panel在作用上是一样的,默认布局方式是BasicLayout布局。
- 3.可视区域(Scroller)
- 或者又叫滚动显示组件区域。
- 这是Flex SDK 4(Gumbo) spark新增的组件,就是用于当Scroller里面的内容边界超出Scroller后,以便显示滚动条。