应用Flex4容器若干技巧

使用Flex4容器若干技巧

查看原文：http://www.adobe.com/cn/devnet/flex/articles/flex_containers_tips.html

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

预备知识

要求具有一些关于 Flex 编程和Flash Builder的经验以便充分吸收本文的内容。

FLEX 容器基本概念

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

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

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

名称

最小尺寸

默认尺寸

默认布局

皮肤？

滚动条

注释

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

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

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

布局指南

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

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

  布局场景

  在自身对象中使用属性

  在父容器中使用属性

  位于BasicLayout 绝对容器中的对象

  Left, right, top, bottom

  horizontalCenter, verticalCenter

  ??

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

  ??

  paddingLeft, paddingRight, paddingTop, paddingBottom

  horizontalAlign, verticalAlign

  

  

  第二个范例（参见图 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> 

  

  通用技巧

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

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