3
容器
.
容器
(containers)
这个词通常指的是在
Flex
框架的
mx.containers
包里面的所有类。容器扩展自
UIComponent
类,添加了布局管理功能,用创建法则(
creation policies)
控制子对象的创建的一系列方法,并自动卷动。各个容器的行为有很大的不同,不过都有定位子对象,用约束或样式布局子对象的能力,并控制卷动,觉得子对象对卷动事件的响应。
对
Flex 3
而言,约束是个新东西。它们让开发者从位置和尺寸两个方面创建定位的规则,并指派给容器的子对象。只有容器才有约束,比如
Canvas
容器,
Canvas
也可以绝对定位,这跟
CSS
的作用几乎一样。
Box
和
Tile
容器提供了子对象的自动布局,还有控制包含在布局管理器里的子对象的方法。
3.1
用布局管理器定位子对象
3.1.1
问题
你需要水平或垂直定位多个子对象,并控制这些子对象的布局。
3.1.2
解答
用
HBox
或
VBox
容器,为
HBox
或
VBox
设置水平间距(
horizontalGap
)或垂直间距(
verticalGap
),相应地,设置组件之间的距离。
3.1.3
讨论
扩展自相同的基类
mx.containers.Box, HBox
和
VBox
组件水平地或垂直地布局它们的子对象,他们各自可以包含无数个子对象。
当子对象的尺寸大于
Box
组件的高或宽时,该
Box
组件会默认添加相应的滚动条。要确定子对象之间的距离,
VBox
容器用
verticalGap
属性,
HBox
容器用
horizontalGap
属性。比如:
<mx:VBox width="400" height="300" verticalGap="20">
<mx:Button label="Button"/>
<mx:LinkButton label="Link Button"/>
</mx:VBox>
可是
HBox
和
VBox
容器不考虑上,下,左,右的约束属性。要在子对象和它们的
Box
容器之间添加空隙,用如下的
Spacer
控件:
<mx:VBox width="400" height="300" verticalGap="20">
<mx:Button label="Button"/>
<mx:ComboBox top="60"/>
<mx:Spacer height="20"/>
<mx:LinkButton label="Link Button"/>
</mx:VBox>
要改变子对象的边缘之间的距离或距离填充样式,添加
paddingTop, paddingLeft, paddingRight,
或
paddingBottom
样式。这会影响到所以添加到容器内的子对象。如果要左右移动
VBox
里或上下移动
HBox
里的单个子对象,就在
Box
里添加一个容器,用他来定位子对象:
<mx:HBox x="400" horizontalGap="10" top="15">
<mx:Canvas>
<mx:Button top="50" label="Button" y="20"/>
</mx:Canvas>
<mx:Panel height="40" width="40"/>
<mx:Spacer width="25"/>
<mx:LinkButton label="Label"/>
<mx:ComboBox/>
</mx:HBox>
下面这个例子在一个
Canvas
容器内用到了
HBox
和
VBox
来显示以上两种布局方式:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:VBox width="400" height="300" verticalGap="20">
<mx:Button label="Button"/>
<mx:ComboBox/>
<mx:Spacer height="20"/>
<mx:LinkButton label="Link Button"/>
</mx:VBox>
<mx:HBox x="400" horizontalGap="10" top="15">
<mx:Canvas>
<mx:Button top="50" label="Button" y="20"/>
</mx:Canvas>
<mx:Panel height="40" width="40"/>
<mx:Spacer width="25"/>
<mx:LinkButton label="Label"/>
<mx:ComboBox/>
</mx:HBox>
</mx:Canvas>
- 大小: 3 KB
- 大小: 3.1 KB
- 大小: 1.6 KB
分享到:
相关推荐
Flex 3 Cookbook 简体中文版是一本专注于Flex 3技术的实用指南,由翻译协作组精心编译并免费传播。这本书旨在帮助开发者深入理解和应用Flex 3框架,包括ActionScript和MXML这两个核心组成部分。 ActionScript是Flex...
《Flex3 Cookbook》是针对Adobe Flex 3这一版本的开发指南,主要涵盖了使用Flex构建富互联网应用程序(RIA)的各种技术和策略。Flex是一个开源框架,它允许开发者使用MXML和ActionScript来创建交互式、高性能的Web...
3. **组件库的使用**:Flex提供了一整套预定义的UI组件,如按钮、文本框、列表等,了解如何创建、自定义和组织这些组件以构建专业级的用户界面。 4. **数据绑定**:学习如何利用Flex的数据绑定机制,实时更新界面...
2. **高级布局管理**:如何利用Flex的布局管理器实现复杂界面布局。 3. **图形和动画进阶**:更深入的图形绘制技巧,以及如何创建复杂的动画效果。 4. **性能优化**:如何提高Flex应用程序的运行效率和响应速度。 5....
如果您是用Flex, 很好用的一本書。 Flex 3 Cookbook by Joshua Noble; Todd AndersonPublisher: O'ReillyPub Date: May 6, 2008 Print ISBN-13: 978-0-596-52985-7 Pages: 704 The best way to show off a powerful...
- **Flex组件和UI设计**:介绍各种Flex UI组件的使用方法,如数据绑定、样式化和布局管理。 - **ActionScript编程**:讲解如何使用ActionScript语言增强Flex应用的功能,包括事件处理、网络通信和数据操作等。 - **...
Flex 3 Cookbook 是一本专注于Adobe Flex 3技术的实用指南,旨在帮助开发者深入理解和应用Flex 3框架。Flex 3 是一个用于构建富互联网应用程序(RIA)的开发平台,它结合了MXML和ActionScript 3.0,使得UI设计和编程...
5. **服务连接**:Flex 3支持与各种服务器端技术(如AMF、Web Services、SOAP)进行通信,书中会介绍如何使用这些技术来获取和发送数据。 6. **动画和效果**:Flex 3提供了强大的动画和视觉效果库,书中会教你如何...
3. **数据绑定**:Flex 3的数据绑定机制使得UI元素和数据模型之间的同步变得简单,书中有实例解析这一机制及其在实际应用中的价值。 4. **图形和动画**:Flex 3提供了丰富的绘图API和Timeline控制,可以创建复杂的...
这些代码可能涉及了Flex 3的基本概念,如布局管理器、组件使用、样式定制、数据绑定、特效和动画、事件处理,以及与后端服务的集成,如AMF(Action Message Format)数据交换。开发者可以通过这些代码来实践书中的...
Flex 4 Cookbook
8. **状态管理与布局**:Flex支持组件状态和容器布局的管理,使得开发者能根据应用的不同阶段调整界面。这部分将介绍如何有效地管理这些特性。 9. **国际化与本地化**:Flex 3提供了支持多语言的机制,书中会介绍...
Flex 3 CookBook源码 Flex 3 CookBook源码
8. **状态管理**:Flex 3允许创建和管理不同的应用程序状态,如用户登录、注册、购物车等,通过状态切换改变界面布局和行为。 9. **国际化与本地化**:书中会介绍如何在Flex应用程序中实现多语言支持,为全球用户...
Flex 3 Cookbook 是一本专注于Flex 3开发的实用指南,主要涵盖了使用Flex 3框架进行应用开发的各种技术和方法。Flex 3是一个由Adobe推出的富互联网应用程序(RIA)开发平台,它结合了MXML和ActionScript两种语言,...