使用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容器中添加滚动条。

布局指南

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

  • 如果对象的容器具有基本或绝对布局,则可以使用限制条件--例如 leftrighttop 、bottomhorizontalCenter和 verticalCenter 来确定其位置。
  • 如果容器拥有具有layout 标签或通过使用Hgroup或 Vgroup获得的 垂直或水平布局,则可以使用horizontalAlign 、 verticalAlign 、gap 、 paddingTop 、 paddingBottompaddingLeft 和 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视图中显示的属性将能够根据选择的组件和容器的布局进行切换。 这是一种仔细检查你正在执行的任务的很好的方式。