Flex完全自学手册-第13章 界面布局.pptVIP

第13章 界面布局 制作一个漂亮的用户界面，离不开整体布局的设计。用户界面设计的合理与否，直接影响界面的美观。Flex提供了强大的页面布局组件——容器（Container）。本章介绍如何使用Flex容器对页面元素进行布局。 13.1 什么是容器 什么是容器呢？举个简单的例子，我们吃饭时用的碗，保鲜用的保鲜盒都可以称为容器。他们都可以存放食物。在用户界面中，也需要这样的容器来存放界面里各种各样的组件。我们有各种各样的碗、保鲜盒可以满足不同食物摆放的需求，例如横着放、竖着放和叠着放。在用户界面中，也枰胁煌的容器来满足不同组件的摆放要求。 所以，Flex提供了各种各样的容器满足不同的界面需求。在容器中，不仅可以放置控件，还可以放置容器或者自定义的组件。容器内的所有组件都称为该容器的孩子，都必须遵循该容器的布局规则，如水平放置或垂直放置。 Flex中定义的容器分为布局类容器和导航类容器。下面介绍如何使用这两种容器。 13.1.1 布局类容器 布局类容器（Layout Containers）类似于HTML页面，将组件平铺放置在容器的平面上。图中，显式了部分布局类容器，包括盒子容器、画布容器等。 13.1.2 导航类容器 导航类容器（Navigator Containers）类似于HTML中窗口之间的切换。在Flex中，整个应用是加载在一个浏览器页面中的。很多时候，一个页面不能满足需求，往往需要多个页面。这种情况下，就可以使用导航类容器，在一个浏览器页面中进行Flex的页面切换。导航类容器的优势在于，用户在进行页面切换时不需要与服务端通信。不再像HTML中那样，与服务器进行通信后才可以打开新的窗口链接。 导航类容器不仅加快浏览速度，并且能够有效的节省页面空间。图显式了三种导航类容器，从左到右依次为视图堆栈导航器、选项卡导航器、层叠导航器。 13.1.3 使用容器 Flex中的容器都使用矩形的区域，容器中的组件必须位于该矩形的区域内。Flex容器可以分为三种布局规则：水平布局、垂直布局和绝对布局。 水平和垂直定位按照水平或者垂直方向自动排列组件。绝对定位方式利用X、Y坐标定位组件的位置，所以组件可以摆放在容器中的任一位置。画布容器只能绝对布局，应用、面板容器既可以使用绝对定位也可以使用水平、垂直定位。盒子、表格容器等只能使用水平、垂直定位。在创建容器时，可以利用layout属性定义布局方式，virtical垂直布局，horizontal水平布局，absolute为绝对布局。 13.1.4 容器中的事件 不仅控件中可以触发事件，容器组件也可以触发事件。容器组件可触发的事件如下所示。 childAdd：当容器中有组件加入时，触发该事件。 childRemove：当容器中组件被删除时，触发该事件。 childIndexChange：当组件加入到容器中后，都会赋予该组件一个序号。当序号改变时，触发该事件。 scroll：当容器不能完全显示包含的组件时，可以通过滚动条查看。使用滚动条查看时，触发该事件。 preinitialize：在容器中的组件与容器相关联时，触发该事件。该事件发生在组件初始化之前，或者当容器中任一组件被创建时。 initialize：当容器结构化以及容器的属性初始化后，触发该事件。当该事件触发时，容器内所有的静态组件均被创建，但未在布局上显示。该事件常用来为容器中的组件定义初始属性以及数据。 creationComplete：容器创建。Flex根据容器及其各组件的定义，完全创建容器及其包含的组件，使其呈现可视状态。该事件发生在initialize之后。 13.2 应用容器 Flex中的应用都是以应用容器（Application Container）开始的，应用中的所有组件（包括容器和控件）都装在应用容器中。应用容器对应的MXML标签为mx:Application。在上一章的控件应用中，应用的MXML代码都是以mx:Application为开始，以/mx:Application结束的。所以在学习容器时，应首先学习应用容器。 在创建应用时，首先需要根据需求定义应用的大小，即该应用在浏览器中显示的大小。定义容器大小有2种方式，采用百分比和采用具体数值。采用百分比时，用户缩放浏览器的时候，应用也会随着缩放，不影响观看的效果。下面这个例子即采用百分比定义应用容器，使其占满整个浏览器区域，如图所示 13.3 盒子容器 在盒子类的容器（Box Containers）中，组件按照水平或者垂直的方式放置在容器内，但所有的组件都是单行放置的。如果长度超过容器的宽或者高，不能自动换行。 盒子类容器包括如下三种。 水平盒子容器容器（HBox Container）：组件水平放置在容器内。 垂直盒子容器（VBox Container）：组