Flex容器详解----概要介绍（一）

 

容器简介：

 

容器提供了一种可以使你灵活布局子组件的层次结构机制。我们可以通过容器方便的改变子组件的大小和位置。通常在Flex种有两种形式的容器：布局和导航。

 

容器可以在Flash Player的界面上方便定义矩阵形式的UI，在容器中我们可以同时设置一些空间和子容器，我们可以叫在容器内定义的任何组件为该容器的孩子。Flex为我们提供了各式各样的容器，如一些常用的box容器，panel， form等。

 

在一个Flex程序的根部是一个叫做Application Container的容器，代表整个Flash Player的画图面板，这个容器用来装载该程序中其他所有的控件和子容器。

 

一个特定的容器一般都会预先定义一些相应的规则用来约束其子容器的布局，如改变大小或位置等。Flex定义这些布局规则可以使我们大大简化设置可以和RIA的实现，也使我们可以足够灵活的创建其他容器。

 

关于从其的布局：

 

容器一般自己预先定义了一些导航和布局的规则，因此你不需要花额外的时间去定义它们，因此你可以集中精力在信息的传递，用户的体验上，而不需要太担心一些事件的设置以及程序显示等。

 

预先定义布局规则的另外一个优点是可以使用户习惯于这种形式，而不是不断接受各种新布局形式，让用户不断去适应新的界面，从而可以让用户把更多的精力放在更重要的信息内容上。

 

不同的容器定义了不同的布局规则：

 

l  除了Canvas容器外，其他所有的容器都自持自动（automatic）布局，在这种类型的布局中，我们不需要去举止指定一个组件的坐标（x，y），相反，我们可以通过调整容器的各种属性去布局，如调整子组件之间的位置顺序，如果设置一些容器得子属性，如gaps，或者设置一个Spacer子控件等。举个例子，我们可以用HBox来让子控件呈水平排列。

l  Canvas容器采用的是绝对布局形式，这样我们可以随意指定一个子组件的X和Y坐标，另外我们也可以用constraints-base布局来控制离父容器的边距，底线和中心点。

 

更多详细的信息请参阅http://livedocs.adobe.com/flex/3/html/size_position_1.html#65267

 

关于布局容器和导航容器

 

Flex定义了两种类型的容器：

 

布局容器： 用来控制子组件的大小和位置，比如Grid布局容器规定了其子组件的形式就像HTML中的table一样，而DividedBox容器在中间有一条分界线，可以让用户随意拖动分界线来改变分界线两侧区域的大小。而TitleWindow容器也提供一个bar，她能包含标题和状态的信息。更多容器组件的使用，请参阅http://livedocs.adobe.com/flex/3/html/layouts_01.html#365481

 

导航容器 主要提供导航让用户选择各种功能，如菜单容器，tab容器等，更多信息请参阅http://livedocs.adobe.com/flex/3/html/navigators_1.html#65267

 

使用容器

 

容器的矩阵区域封装了他的内容范围，只有这个范围内才可以防止子组件，容器的padding（内边距）和两边的宽度决定了容器的大小，容器的padding分为bottom，top，left和right。每部分都可以设置px大小，下图显示了容器的padding，border和相应的区域。

 

  

A.      Left padding B. Right padding C. Container D. Content area E. Top padding F. Bottom padding

尽管我们可以只用一种容器就可以布局一个flex程序，但是通常为了简化工作量，我们都用各种flex为我们提供的容器。如下图就使用了三种容器：

 

 A.      Parent HBox layout container B. Child VBox layout container

 

在这个例子中，两个VBox被放在了一个HBox中。

 

HBox中的子组件都是水平流水线布局的，我们可以通过设置horizontalGap 和 verticalGap来控制gap。

 

VBox中的子组件是垂直排列的。下图显示了VBox的布局形式：

 

 

 

A.      Parent VBox layout container B. Child VBox layout container

 

布局容器的主要用途是用来排列他的子组件，这些组件可能是其他组件的容器或者是一些普通的控件，下图显示了一个VBox中有三个子组件：

 

 

 

 

 

利用Form布局容器，我们可以创建基于表单的应用程序。在这个容器中用户可以轻松布局各种形式的表单控件，如下图：

 

 

 

Form容器还可以利用Flex提供的验证机制在用户提交表单之前验证一些error。这样就可以在用户提交之前纠正一些客户端能错误，从而减少和server的链接开销。更多有关表单容器的知识请参阅http://livedocs.adobe.com/flex/3/html/layouts_08.html#109973

 

 

导航容器，如TabNavigator和Accordion容器，里面预先设置了许多子容器，可以使哟过户方便的移动到自己需要的信息部分，如下图展示了一个Accordion容器：

 

 

 

 

A． Accordion按钮

我们可以点击不同的Accordion按钮跳转到不同的子容器中，Accordion容器定义了一系列子panel可以让我们点击Accordion按钮访问。更多信息请参阅http://livedocs.adobe.com/flex/3/html/navigators_5.html#246009

 

 

Flex容器简介

 

下表列出了一些常用的Flex容器

 

容器名	类型	简介
Accordion	导航	将不同类型的信息放入一系列定义好的panel中，在任何时间内总是有一个panel处在激活状态
ApplicationControlBar	布局	用来存放子组件并提供全局导航和各种应用程序的命令。可以被放在一个Application容器的最顶端。
Box (HBox and VBox)	布局	以水平或者垂直的方式布局子组件。
Canvas	布局	该容器中的子组件必须明确的给定坐标位置。
ControlBar	布局	可以将子组件放置在一个panel或者TitleWindow的下边缘。
DividedBox (HDividedBox VDividedBox)	布局	水平或者垂直的布局其子组件，类似Box容器，只是其中多了一条水平或者垂直的分界线将容器分割成两个区域。
Form	布局	可以用来设计一个表单
Grid	布局	可以布局一个类似HTML table的形式
Panel	布局	显示一个title bar，一些说明，边框和一些子组件
TabNavigator	导航	可以设置许多tab，选择不同的tab选项卡可以切换到不同的内容区域。
Tile	布局	有点类似grid 可以指定行数和列数。
TitleWindow container	布局	类似一个window窗口，有关闭按钮，标题栏，菜单栏等。
ViewStack	导航	一个类似栈的导航容器