- 浏览: 248374 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
本文的相关文章:
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
1.管理程序的布局
容器累组件都位于mx.containers包中。Container类是UIComponent的子类,是所有Flex容器类的父类,每个容器类都在它的基础上添加自己的功能。
1.1控制Application 的布局
Application 是一个特殊的容器,位于界面元素的根部,包含了整个程序的所有元素。
layout :
值为absolute时,horizontalAlign水平对齐和verticalAlign垂直对齐不起作用,界面上的元素将由各自的坐标决定。
值为vertical 或 horizontal时,元素的位置由horizontalAlign和verticalAlign控制。
width 长, height 高。决定SWF文件的尺寸。
我们可以设置如下的属性,所有组件公有:
horizontalGap 水平间距
vericalGap 垂直间距
paddingTop 顶部边距
paddingLeft 左边距
paddingRight 右边距
paddingBottom 底边距
Constraint layout 约束布局,只能在layout属性值为absolute才能使用,具有这一特性的容器有:Application、Canvas、Panel和Panel的子类TitleWingdow
点击元素得到如下界面:
如果对某一组件使用了约束布局,它会被强制定位在相应的位置,设置的X,Y坐标会失效。
ApplicationContolBar是和Application相关的一个容器,通常用来提供全局导航。有水平(默认)和垂直方向选择。它的dock属性,表示是否强行停靠在Application的顶部。默认false,被当作一个普通的组件。true,始终在顶部,宽度为100%。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%" horizontalGap="0" verticalGap="0" paddingTop="0"> <mx:Button label="Button1" height="120" x="24" y="0"/> <mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/> <mx:Button label="Button3" width="240" x="168" y="0"/> <mx:ApplicationControlBar dock="true"> <mx:Label text="这里是顶部导航" width="93" height="20"/> </mx:ApplicationControlBar> </mx:Application>
1.2 Canvas
Canvas 直接继承自Container,体积小,使用灵活。在它里面的元素只能由X,Y来定位。如果元素超出 Canvas 的区域范围, Canvas 会自动增加滚动条。每个容器默认情况下都会自动带滚动条。可以通过horizontalScrollPolicy和 verticalScrollPolicy 的属性值来控制,on/off/auto。在AS中对应ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO。
1.3 VBox 和 HBox
VBox 和 HBox 都是Box的子类,和Canvas相比,Box对子级元素采取规则的布局方式,其中VBox内的元素垂直方向分布,而HBox水平方向分布。通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left" verticalAlign="middle"> <mx:Button label="Button"/> <mx:Label text="这是一个HBox"/> </mx:HBox> <mx:VBox width="50%" x="263" y="30" height="100%"> <mx:Label text="这是一个VBox"/> <mx:Button label="Button"/> </mx:VBox> </mx:Application>
1.4 用DividedBox分割界面
DividedBox继承自Box类,它有两个子类:HDividedBox和VDividedBox。类似于HBox和VBox,多了在子级元素之间增加了可以拖动的分割块。拖动分割块可以动态的调整分割块附近元素的长宽。
borderStyle是组件的样式之一,表示边框样式,默认:none,表示无边框。solid为实心线条。
liveDragging:true 表示在拖动时,在松开鼠标后,调整位置。false 拖动时调整。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid" x="10" y="10"> <mx:Canvas width="200" height="246"> <mx:Label x="33" y="10" text="一个Canvas容器"/> </mx:Canvas> <mx:HBox width="50%" height="50%"> <mx:Label text="HBox容器" width="140"/> <mx:HBox width="50%" height="50%"> <mx:Label text="HBox内的HBox" width="140"/> </mx:HBox> </mx:HBox> </mx:HDividedBox> </mx:Application>
发表评论
-
如何使用Cairngorm3的导航库(Spring AS)
2011-08-29 17:39 2857一、概述 二、LIB库包配置 下载需要的LIB库 ... -
Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果
2008-09-28 16:47 37736.3.2 放缩效果和调整大 ... -
Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果
2008-09-27 22:33 31356.3.1 模糊效果和发光效 ... -
Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
2008-08-17 01:30 21826.1 认识行为对象 6.1.1 什么是行为对象 行 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32169.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 28379.2.1 函数和类级别的绑 ... -
Flex学习笔记_09 数据绑定_概念、使用
2008-07-21 23:32 20459.1 认识数据绑定 9.1.1 数据绑定的概念 ... -
Flex学习笔记_08 Flex的事件机制_高级应用
2008-07-16 23:11 31758.3 事件机制的高级应用 8.3.1 事件的优先级别和 ... -
Flex学习笔记_08 Flex的事件机制_事件工作流程
2008-07-15 09:05 26908.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex学习笔记_08 Flex的事件机制_事件架构
2008-07-14 08:54 24578.1 一切从事件开始 8.1.1 关于事件 事件有 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础_数据类型及其运算、程序流程
2008-07-13 19:21 46117.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 28557.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 25563. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_02导航类组件
2008-07-02 00:04 29642. 导航类组件 2.1 ToggleButtonBa ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(下)
2008-06-30 10:37 4578Flex学习笔记_06 使用组 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(中)
2008-06-29 22:50 3937Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(上)
2008-06-26 23:11 4491Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
2008-06-25 08:40 6683本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
2008-06-24 09:07 5073本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_04 MXML语言简介
2008-06-17 22:52 54221. MXML语法 MXML语言是专门用于Flex程序中, ...
相关推荐
Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
Flex_4_样式与布局小结详细的资源描述有机会获得我们的推荐,更有利于他人下载,赚取更多积分
Flex_布局与容器 部分容器的介绍和例程。
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf Flex_4_界面设计实战.pdf
Flex特效_可拖动弹出窗口布局容器TitleWindow.zip )
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
amcharts_flex_components_1.8.1 和开发示例
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
Flex_CookBook_读书笔记(精品) Flex_CookBook_读书笔记(精品)
flex布局笔记
Flex万年历记事本_flex源码
arcgis_api_for_flex_3_6 api库文件,现在esri官网需哟注册才能下载了,而且网速超慢,我下了好几次才下载完,希望对大家有用
MAPABC_FLEX_API_WEB_V2.4
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
Flex_I_O_简介
可以实现flex布局的基本功能,flex的基本布局模板
6.5 新建一个Flex应用程序,测试连接 35 6.6 实际应用 37 7 Cairngrom框架 38 8 实例:Simple Note Management 40 8.1基本组件使用[Tree,datagrid,TitleWindow,ViewStack] 40 8.2读写XML 40 8.3读写ShareObject 40 8.4...
将_Adobe_Flex_和_JavaFX_与_JavaServer_Faces_2.0_结合使用.pdf