使用Flex4容器若干技巧
本文适用于正在寻找使用Flex 4容器和布局的快速参考指南的开发人员。 尽管这不一定是一个复杂问题,但这似乎是许多开发人员的挫折的来源,特别是对于那些Flex刚刚入门的开发人员。 当开发人员不知道如何正确使用容器和布局时,他们的代码常常包含过多的嵌套容器和大量毫无意义的属性。
Flex 容器基本概念
Flex 4 容器可以提供一套默认的布局:Basic、Horizontal或 Vertical以及能够基于容器内容的默认尺寸。 当进行子组件对齐操作时,注意你正在使用的容器的最小和默认尺寸。参见表 1。有些容器是可植皮的,如果真是如此,则通过在它们的皮肤上添加Spark Scroller对它们进行滚动操作。
注意Basic 布局等同于 Flex 3的绝对布局(absolute layout )。
此外,还应该注意 Spark 容器支持包含形状和FXG元素的 GraphicElement对象以及作为直接子组件的IVisualElement对象 UI 控件。 但并不是所有的MX容器均是这种情形。
表 1. Spark容器
名称 |
最小尺寸 |
默认尺寸 |
默认布局 |
皮肤? |
滚动条 |
注释 |
---|---|---|---|---|---|---|
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 |
在默认情形下,当你利用Flash Builder创建一个web应用程序,它将分别具有955 和600 的最小宽度和最小高度。 你可以在Flash Builder 中通过从File Template中删除minSize
变量来改变这一设置。
- 在Flash Builder中,选择Flash Builder > Preferences。
- 展开Flash Builder 并且选择 File Templates。
- 点击MXML Web Application 将其作为 File Type。参见图 1。
- 点击Edit并且删除
${min_size}
。 - 点击OK两次。
有些容器能够支持嵌套 layout
标签以覆盖表1中所示的 默认布局,它们仅仅包含作为子组件的 layout
标签。 允许你进行布局嵌套的容器包括Application、BorderContainer、Group、Panel和SkinnableContainer。
布局形象化和布局属性
通常,如果一个概念能够栩栩如生地展现出来,则它易于快速地被人们接受—正如谚语所言:一副图画胜过千言万语。 Justin Shacklette和 Gilles Guillemin是 FlexLayouts.org的拥有者,他们已经画出三幅对说明Flex 4的HorizonalLayout (参见图 2) 、Vertical Layout (参见图 3)以及TileLayout (参见图 4)很有帮助的示意图。他们还展示了如何应用属性,例如填充(paddingLeft
)、对齐(horizontalAlign
) 以及gap
等。 你可以下载这些查看PDF。 请在下载之后欣赏他们这些令人叫绝的自定义Flex 4布局。
图2. Flex 4的HorizontalLayout
图3. Flex 4的VerticalLayout
图4. Flex 4的TileLayout
Group容器滚动
在Flex 3中,滚动功能内置于组件;而在 Flex 4中,该功能的实现方式不同。 因此,在 Flex 3和 Flex 4组件中,在如何处理滚动操作方面存在显著差异。 对Group 容器以及 Hgroup、Vgroup和 DataGroup 容器进行滚动操作的最佳方法是在一个Spark Scroller对象中包装容器。 关键之处是将Scroller的宽度和高度设置为你希望查看内容的尺寸。 你也可以设置滚动位置以便在相应范围的当前位置显示内容。 如果你没有设置宽度和高度,或将它们设置为大于内容的值,则滚动条将不会出现。 例如,考虑下列代码,它的任务是将Scroller的宽度和高度设置为图像的尺寸。
<?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" minWidth="955" minHeight="600"> <s:Scroller width="300" height="300"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>
假如从Scroller对象中完全删除 width
和 height
,则滚动条不会显示出来。参见图5。
下列代码将显示具有水平滚动条的图像的左半部分,允许用户滚动到图像的另一半部分。参见图6。由于Scroller高度被默认设置为内容高度,故垂直滚动条将不会添加:
<?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" minWidth="955" minHeight="600"> <s:Scroller width="150"> <s:Group> <mx:Image width="300" height="300" source="@Embed(source='logo.png')"/> </s:Group> </s:Scroller> </s:Application>
图6. 由于Scroller高度被设置为内容高度,导致垂直滚动条不可见
可植皮容器滚动
对于可植皮的容器,其中包括 Spark Application、BorderContainer、 NavigatorContent、Panel和 Window,你应该将Scroller对象添加到围绕 contentGroup
Group对象的skin类。 例如,下面是来自一个自定义SkinnableContainer MXML 皮肤的相关代码:
<s:Scroller width="100%" height="100%"> <s:Group id="contentGroup" minWidth="0" minHeight="0" /> </s:Scroller>
另一个可选方法是在你的代码中将包围你的内容的Scroller和 Group作为第一个子组件进行嵌套。 然而,首选方法是在skin类中保持Scroller的独立状态。 关于滚动和容器的更多详细信息,参见 在 Spark容器中添加滚动条。
布局指南
下面是我在使用容器时遵循的若干指南:
- 如果对象的容器具有基本或绝对布局,则可以使用限制条件--例如
left
、right
、top
、bottom
、horizontalCenter
和verticalCenter
来确定其位置。 - 如果容器拥有具有
layout
标签或通过使用Hgroup或 Vgroup获得的 垂直或水平布局,则可以使用horizontalAlign
、verticalAlign
、gap
、paddingTop
、paddingBottom
、paddingLeft
和paddingRight
属性来控制子组件以及包围它们的空白符。 这些属性不能用于基本或绝对布局。参见表2。
表 2. 布局属性小结
布局场景 |
在自身对象中使用属性 |
在父容器中使用属性 |
||
---|---|---|---|---|
位于BasicLayout 绝对容器中的对象 |
Left, right, top, bottom |
horizontalCenter, verticalCenter |
||
位于Vertical、Horizontal或 TileLayout 容器中的对象 |
paddingLeft, paddingRight, paddingTop, paddingBottom |
horizontalAlign, verticalAlign |
<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:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement --> <s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200"> <s:Label horizontalCenter="0" top="30" text="Basic Layout using constraints on the object itself for layout."/> </s:SkinnableContainer> <!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement --> <s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" > <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="30"/> </s:layout> <s:Label text="VerticalLayout that specifies where the label is placed with properties."/> </s:SkinnableContainer> </s:Application>
- 如果希望利用水平或垂直布局在一个容器中将子组件定位在中央位置或利用 Hgroup或 VGroup将子组件定位在中央位置,则可以使用
horizontalAlign="center"
和verticalAlign="middle"
。 - 如果希望在一个具有基本或绝对布局的容器中将一个组件定位在中央位置,可以在需要定位在中央位置的组件中使用
horizontalCenter="0"
和verticalCenter="0"
。
下面两个代码范例使用不同技巧将一个对象定位在中央位置,它们产生的结果是相同的。
第一个范例(参见图 8)使用 horizontalAlign="center"
和 verticalAlign="middle"
:
<?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:layout> <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> </s:layout> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/> </s:Application>
第二个范例(参见图 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>
图9.使用 horizontalCenter="0" 和 verticalCenter="0"对红色正方形进行定位
通用技巧
最后,给出需要牢记的若干通用技巧:
- 总体来说, 应该选择使用限制条件 而不选择具有(x,y)值的绝对定位方式,因为限制条件可以动态地调整浏览器的大小。 当为web、桌面、手机和平板电脑设备开发跨平台的应用程序时,这一点更为重要,因为这些设备的屏幕尺寸变化较大。
- 一般来说,可以将
left/right
用于大小调整目的,而将horizontalCenter
和verticalCenter
用于定位目的。 - 对于一般居中定位目的,特别是当启动最小尺寸窗口并且你希望对一个对象进行居中定位时,可以使用horizontalCenter。
注: 当不知使用哪个属性时,切换至 Design视图,以便在Property检查工具中查看哪些选项可以使用。 在Design视图中显示的属性将能够根据选择的组件和容器的布局进行切换。 这是一种仔细检查你正在执行的任务的很好的方式。
转载于:https://www.cnblogs.com/fuland/p/3628932.html
使用Flex4容器若干技巧相关推荐
- Linux内核源码中使用宏定义的若干技巧
在C中,宏定义的概念虽然简单,但是真要用好却并不那么容易,下面从Linux源码中抽取一些宏定义的使用方法,希望能从中得到点启发: 1. 类型检查 比如module_init的宏定义: 点击(此处)折叠 ...
- 改善代码可测性的若干技巧
概述 软件的工程性体现在质量与效率.单测是构成软件质量的第一道防线,而单测覆盖率是软件质量的重要指标之一. 编写容易测试的代码,可带来更佳的单测覆盖率,间接提升开发效率. 为什么程序员不大写单测呢? ...
- 掌握这 20 个容器实战技巧!
就在前几个月,Apache 宣布准备将曾火极一时的 Mesos 项目移至 Attic下 ,保存为"只读"状态.要知道,Attic 是 Apache 软件基金会为已终止项目提供的一种 ...
- docker容器测试技巧
(1)Dockerfile设置常驻状态 在Dockerfile最后增加命令,让容器sleep,防止执行任务进程失败后退出容器 CMD sleep 6000 (2)安装辅助工具 先查看容器系统版本,这里 ...
- 成都物韵电子商务有限公司拼多多代运营若干技巧
在网上做拼多多的时候,店铺的关键词是非常重要的.因为我们在进行店铺运营的时候,就需要用到很多技巧.只有把关键词掌握到位了,才能对店铺做出很好的判断.今天就来和大家聊一聊有关关键词在网店中所起到的作用以 ...
- 面试官:我把数据库部署在Docker容器内,你觉得如何?
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 来源:33h.co/eqFQ 近2年Docker非常的火热,各位开 ...
- 数据库为何不建议部署在Docker容器内
近2年Docker非常的火热,各位开发者恨不得把所有的应用.软件都部署在Docker容器中,但是您确定也要把数据库也部署的容器中吗?这个问题不是子虚乌有,因为在网上能够找到很多各种操作手册和视频教程, ...
- 为什么不建议把数据库部署在Docker容器内
近几年Docker非常的火热,各位开发者恨不得把所有的应用.软件都部署在Docker容器中,但是您确定也要把数据库也部署的容器中吗?这个问题不是子虚乌有,因为在网上能够找到很多各种操作手册和视频教程, ...
- docker rails mysql_MySQL 进行 Docker 容器化之体验与感悟
原则 Docker 的使用原则是所有容器化的应用程序都应该是无状态的 ,即容器内部只跑业务逻辑,容器应用的所有配置文件.日志文件和持久化数据 都应该挂载到宿主机文件系统,不应该存储在容器内部,以免容器 ...
最新文章
- HTTP协议的六种请求方法
- 【博客话题】感谢您,我的老师
- 微博 用户画像_“肖战”被抵制?Python爬虫揭秘肖战粉丝的人群画像
- ConcurrentHashMap 源码
- 操作系统之进程管理:13、吸烟者问题
- python安装扩展常用的工具是_Python 安装扩展库常用的是 _______ 工具_学小易找答案...
- 利用机器学习的排名模型,提升你在英雄联盟的排名
- 单招考试计算机专业大概分数线是多少,单招分数线一般多少?
- Android基础入门教程——2.5.2 Notification(状态栏通知)详解
- 电脑分辨率怎么调?教你调整电脑屏幕分辨率
- c++求余弦的泰勒展开式
- 笨方法学python 习题26
- 无线渗透----kismet工具使用
- 【贪心算法】最优装载问题C++语言
- Python : 程序提示SyntaxError: invalid syntax错误
- Java(24):GSON - JsonParser将 JSON 字符串解析为 Java 对象的树结构
- App广告投放数据统计
- Leetcode PHP题解--D62 976. Largest Perimeter Triangle
- 企业项目管理数字化解决方案
- open、openat和close函数
热门文章
- 企业网络推广—企业网络推广专员一定要避免这些不靠谱的优化方式
- 浅析营销型网站SEO优化的四大原则!
- android 串口开发_详细分析Esp8266上电信息打印的数据,如何做到串口通讯上电不乱码打印...
- tensor torch 构造_TORCH.TENSOR
- (转载)Linux新增磁盘、分区、格式化和自动挂载
- (转载)linux下的find文件查找命令与grep文件内容查找命令
- android从放弃到精通 第一天 重拾项目开发
- HMM 模型输入数据处理的优雅做法 来自实际项目
- 基于UDP的DDos反射放大攻击
- go语言笔记——append是内置的函数!!!new是一个函数!!!调试可以使用闭包,本质上是print调试,尼玛!...