Flex迷你教程 — Flex SDK 4新特性:布局

继续第二章，布局

简介

这篇教程中我们将通过一些简单的例子初步的学习Flex SDK 4中新的布局方式。

学习目标

1. 初步了解SDK4中布局有哪些变化。
2. 学会使用新的布局方式。

准备工作

下载并安装Flash Builder 4

实现步骤

在之前的Flex SDK中，布局是在控件或者容器中单独定义的，因此我们的控件，比如List, TileList, and HorizontalList，他们全都有完全相同的方法，只是布局方式不同。在Flex 4中，布局已经从控件中剥离出来。这样我们可以更加灵活的对控件进行布局，比如在运行时将容器的布局方式由横向改为纵向。这在Flex 3中是很难实现的， 因为我们很难在运行时把List改为TileList 或者将Hbox改为Vbox。

在Flex 4的spark包中已经没有了原来的Hbox, Vbox, Box以及Canvas容器，取而代之的是Group，另一个新的容器是SkinnableContainer，它与Group的区别是我们可以为它定义皮肤。Group不能定义皮肤但有更高的执行效率以及使应用程序的体积更小。

我们现在来看一组例子，在Flex 4中定义List, TileList以及 HorizontalList

1. List

<s:List />

2. HorizontalList

<s:List>
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>
</s:List>

3. Tiled List

<s:List>
    <s:layout>
        <s:TileLayout />
    </s:layout>
</s:List>

上面的例子中我们通过设置layout标签中的HorizontalLayou与TileLayout实现了3种不同List的布局，可以看到虽然从形式上样式的定义变得
更“复杂”了，但是布局的解耦让我们对控件的使用变得更加灵活。

除了控件的布局方式改变外，Flex 4中的滚动条也从控件中剥离了出来，默认的容器是没有滚动条以及virtualization的，我们来看下面显示滚
动条的例子。
<?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/halo">
<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
    <s:Scroller width="100%" height="100%">
        <s:Group>
           <s:layout>
               <s:HorizontalLayout useVirtualLayout="true" />
           </s:layout>
           <s:TextInput />
           <s:Button label="clear" />
           <mx:DateChooser />
           <s:Button label="submit" />
        </s:Group>
    </s:Scroller>
</s:Panel>
</s:Application>

上面的代码中我们通过使用Scroller控件给Group容器加上了滚动条，如果把Scroll放在Panel的外面则滚动条出现在Panel的外部。
编译运行上面的代码


对布局的基本介绍就到这里，同学们可以到Spark Layout Specification 查看更详细的内容。
本节源码
Layout Demo (309)

总结

布局在Flex 4中有了很大的变化，就像我刚才提到的，布局的解耦让我们对容器，控件的界面操作变得更加灵活与合理。不过Flex 3中的布局方式仍然在mx控件中有效，所以我们也不必担心Flex 3程序向Flex 4移植的问题。