Flex 三 与 Flex 4 之间的区别-布局中的变化

Flex 3 与 Flex 4 之间的区别---布局中的变化

之前的 Flex 版本在各个控件中定义组件和容器布局。因此，List、TileList 和 HorizontalList 等组件都共享布局以外的相同功能。而它们的布局逻辑仍在这些组件类中进行定义。在 Flex 4 中，布局已与组件剥离开来。现在，Application、List、ButtonBar 和 Panel 等 Spark 组件可以通过声明方式定义布局。在所有组件中，Group 类负责管理包含，而 Group 的子代的布局则委派到相关的布局对象。布局除了 FXG 图形基元，还支持 Spark 和 MX 组件。甚至可以在运行时更改布局。

作为开发人员，您可以轻松编写自定义布局并将它们切入或切出个别组件。以下是定义垂直 List、水平 List 和拼贴 List 的一个示例。

垂直 List（Spark List 的默认布局是 VerticalLayout）：

<s:List />

水平 List：

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

拼贴 List：

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

如前所述，Flex 4 架构旨在为开发人员提供构造块，供他们根据需要选择功能。默认情况下，关闭虚拟化和滚动。要增加 Group 上的滚动栏选项并开启虚拟化，您需要：

1) 在布局对象上将 useVirtualLayout 设为 true

 

2) 将一个 Scroller 组件添加到 Group。

 

以下是对 Spark Panel 使用虚拟化和滚动的一个示例：

<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>

有关 Flex 4 中的所有布局增强（包括对变换的更好支持）的更多信息，请参阅 Spark 布局文档*。