使用Flex4容器若干技巧

时间：2023-03-08 17:26:46

本文适用于正在寻找使用Flex 4容器和布局的快速参考指南的开发人员。 尽管这不一定是一个复杂问题，但这似乎是许多开发人员的挫折的来源，特别是对于那些Flex刚刚入门的开发人员。 当开发人员不知道如何正确使用容器和布局时，他们的代码常常包含过多的嵌套容器和大量毫无意义的属性。

Flex 容器基本概念

Flex 4 容器可以提供一套默认的布局：Basic、Horizontal或 Vertical以及能够基于容器内容的默认尺寸。 当进行子组件对齐操作时，注意你正在使用的容器的最小和默认尺寸。参见表 1。有些容器是可植皮的，如果真是如此，则通过在它们的皮肤上添加Spark Scroller对它们进行滚动操作。

注意Basic 布局等同于 Flex 3的绝对布局（absolute layout ）。

此外，还应该注意 Spark 容器支持包含形状和FXG元素的 GraphicElement对象以及作为直接子组件的IVisualElement对象 UI 控件。 但并不是所有的MX容器均是这种情形。

表 1. Spark容器

名称

最小尺寸

默认尺寸

默认布局

皮肤？

滚动条

注释

Group

0x0

Content

Basic

  

包含于Scroller

与Box相似但没有skin/chrome

HGroup

0x0

Content

Horizontal

  

包含于Scroller

水平对齐条目；与Vbox相似但没有skin

VGroup

0x0

Content

Vertical

  

包含于Scroller

垂直对齐条目；与Vbox相似但没有skin

DataGroup

0x0

Content

Basic

  

包含于Scroller

携带一个数据提供者和条目渲染器

SkinnableContainer

0x0

Content

Basic

X

添加至skin

包含式样属性

BorderContainer

112x112

112x112

Basic

X

添加至skin

包含式样属性

Panel

131x127

Content

Basic

X

添加至skin

包含标题条

Application

0x0

375x500 or all space in browser

Basic

X

添加至skin

Web应用程序

NavigatorContent

0x0

Content

Basic

X

添加至skin

用于导航容器

Window

0x0

100x100

Basic

X

添加至skin

只用于AIR

WindowedApplication

OS/chrome-specific

100x375

Basic

X

添加至skin

只用于AIR

在默认情形下，当你利用Flash Builder创建一个web应用程序，它将分别具有955 和600 的最小宽度和最小高度。 你可以在Flash Builder 中通过从File Template中删除minSize变量来改变这一设置。

  1. 在Flash Builder中，选择Flash Builder > Preferences。
  2. 展开Flash Builder 并且选择 File Templates。
  3. 点击MXML Web Application 将其作为 File Type。参见图 1。
  4. 点击Edit并且删除${min_size}。
  5. 点击OK两次。
使用Flex4容器若干技巧
图1. 从MXML Web Application 文件模板中删除min_size变量

有些容器能够支持嵌套 layout标签以覆盖表1中所示的 默认布局，它们仅仅包含作为子组件的 layout 标签。 允许你进行布局嵌套的容器包括Application、BorderContainer、Group、Panel和SkinnableContainer。

布局形象化和布局属性

通常，如果一个概念能够栩栩如生地展现出来，则它易于快速地被人们接受—正如谚语所言：一副图画胜过千言万语。 Justin Shacklette和 Gilles Guillemin是 FlexLayouts.org的拥有者，他们已经画出三幅对说明Flex 4的HorizonalLayout （参见图 2） 、Vertical Layout （参见图 3）以及TileLayout （参见图 4）很有帮助的示意图。他们还展示了如何应用属性，例如填充（paddingLeft）、对齐(horizontalAlign) 以及gap等。 你可以下载这些查看PDF。 请在下载之后欣赏他们这些令人叫绝的自定义Flex 4布局。

使用Flex4容器若干技巧

图2. Flex 4的HorizontalLayout

使用Flex4容器若干技巧

图3. Flex 4的VerticalLayout

使用Flex4容器若干技巧

图4. Flex 4的TileLayout

Group容器滚动

在Flex 3中，滚动功能内置于组件；而在 Flex 4中，该功能的实现方式不同。 因此，在 Flex 3和 Flex 4组件中，在如何处理滚动操作方面存在显著差异。 对Group 容器以及 Hgroup、Vgroup和 DataGroup 容器进行滚动操作的最佳方法是在一个Spark Scroller对象中包装容器。 关键之处是将Scroller的宽度和高度设置为你希望查看内容的尺寸。 你也可以设置滚动位置以便在相应范围的当前位置显示内容。 如果你没有设置宽度和高度，或将它们设置为大于内容的值，则滚动条将不会出现。 例如，考虑下列代码，它的任务是将Scroller的宽度和高度设置为图像的尺寸。

<?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:Scroller width="300" height="300"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>

假如从Scroller对象中完全删除 width和 height ，则滚动条不会显示出来。参见图5。

使用Flex4容器若干技巧
图5. 由于Scroller和 Image 具有相同的尺寸，导致滚动条不可见

下列代码将显示具有水平滚动条的图像的左半部分，允许用户滚动到图像的另一半部分。参见图6。由于Scroller高度被默认设置为内容高度，故垂直滚动条将不会添加：

<?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:Scroller width="150"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>
使用Flex4容器若干技巧

图6. 由于Scroller高度被设置为内容高度，导致垂直滚动条不可见

可植皮容器滚动

对于可植皮的容器，其中包括 Spark Application、BorderContainer、 NavigatorContent、Panel和 Window，你应该将Scroller对象添加到围绕 contentGroup Group对象的skin类。 例如，下面是来自一个自定义SkinnableContainer MXML 皮肤的相关代码：

<s:Scroller width="100%" height="100%"> <s:Group id="contentGroup" minWidth="0" minHeight="0" /> </s:Scroller>

另一个可选方法是在你的代码中将包围你的内容的Scroller和 Group作为第一个子组件进行嵌套。 然而，首选方法是在skin类中保持Scroller的独立状态。 关于滚动和容器的更多详细信息，参见 在 Spark容器中添加滚动条。

布局指南

下面是我在使用容器时遵循的若干指南：

  • 如果对象的容器具有基本或绝对布局，则可以使用限制条件--例如 left、right、top 、bottom、horizontalCenter和 verticalCenter 来确定其位置。
  • 如果容器拥有具有layout 标签或通过使用Hgroup或 Vgroup获得的 垂直或水平布局，则可以使用horizontalAlign 、 verticalAlign 、gap 、 paddingTop 、 paddingBottom、paddingLeft 和 paddingRight 属性来控制子组件以及包围它们的空白符。 这些属性不能用于基本或绝对布局。参见表2。

表 2. 布局属性小结

布局场景

在自身对象中使用属性

在父容器中使用属性

位于BasicLayout 绝对容器中的对象

Left, right, top, bottom

horizontalCenter, verticalCenter

    

位于Vertical、Horizontal或 TileLayout 容器中的对象

    

paddingLeft, paddingRight, paddingTop, paddingBottom

horizontalAlign, verticalAlign
<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"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement --> <s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200"> <s:Label horizontalCenter="0" top="30" text="Basic Layout using constraints on the object itself for layout."/> </s:SkinnableContainer> <!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement --> <s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" > <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="30"/> </s:layout> <s:Label text="VerticalLayout that specifies where the label is placed with properties."/> </s:SkinnableContainer> </s:Application>
使用Flex4容器若干技巧
图7. 两个容器具有使用不同技巧定位的内容
  • 如果希望利用水平或垂直布局在一个容器中将子组件定位在*位置或利用 Hgroup或 VGroup将子组件定位在*位置，则可以使用horizontalAlign="center" 和 verticalAlign="middle" 。
  • 如果希望在一个具有基本或绝对布局的容器中将一个组件定位在*位置，可以在需要定位在*位置的组件中使用horizontalCenter="0" 和 verticalCenter="0" 。

下面两个代码范例使用不同技巧将一个对象定位在*位置，它们产生的结果是相同的。

第一个范例（参见图 8）使用 horizontalAlign="center" 和 verticalAlign="middle" ：

<?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"> <s:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/> </s:Application>
使用Flex4容器若干技巧
图8. 使用 horizontalAlign="center" 和verticalAlign="middle"对红色正方形进行定位

第二个范例（参见图 9）使用 horizontalCenter="0" 和 verticalCenter="0" ：

<?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"> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/> </s:Application>
使用Flex4容器若干技巧

图9.使用 horizontalCenter="0" 和 verticalCenter="0"对红色正方形进行定位

通用技巧

最后，给出需要牢记的若干通用技巧：

  • 总体来说， 应该选择使用限制条件 而不选择具有（x,y）值的绝对定位方式，因为限制条件可以动态地调整浏览器的大小。 当为web、桌面、手机和平板电脑设备开发跨平台的应用程序时，这一点更为重要，因为这些设备的屏幕尺寸变化较大。
  • 一般来说，可以将 left/right 用于大小调整目的，而将 horizontalCenter 和 verticalCenter用于定位目的。
  • 对于一般居中定位目的，特别是当启动最小尺寸窗口并且你希望对一个对象进行居中定位时，可以使用horizontalCenter。

注： 当不知使用哪个属性时，切换至 Design视图，以便在Property检查工具中查看哪些选项可以使用。 在Design视图中显示的属性将能够根据选择的组件和容器的布局进行切换。 这是一种仔细检查你正在执行的任务的很好的方式。

相关文章