赖勇浩(
http://laiyonghao.com
)
国庆期间,做了不少基于
flex
的开发工作,对
flex
的布局容器有了进一步深入的理解,也找到不少非常棒的文章,分享到这里方便一下大家。
很好的文章
Flex3
界面布局教程
(1)
http://blog.chinaunix.net/u/21684/showart_691988.html
Flex3
界面布局教程
(2)
http://blog.chinaunix.net/u/21684/showart_692022.html
Flex
组件的定位和布局
http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/
Using Layout Containers
http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_07.html
基本上看完前三篇,这方面就能搞得很好了;最后一篇是官方的关于布局容易的手册,有空的时候看看,可以了解更多细节。下面开始分享我的学习笔记(有润色),内容没有脱离上面的四篇文章,没兴趣的朋友可以跳过不看了。
定位模式
要想弄明白
flex
的界面布局,就有必要先弄明白它的定位模式。
flex
的自由之处在于你可以在
mxml
里写上许多定位模式的代码,当这些定属性发生冲突时,它会自动根据优先级来执行优先级最高的定属性。你不用担心记不住这些优先级,
flex
这个
IDE
在检测到冲突时,会在
problem
框里显示一个警告,这样你可以去掉优先级比较低的定位属性了。
众多的定位模式中第一个是绝对模式,即你通过确定的数值来设定
x
、
y
、
width
和
height
属
性;使用绝对模式你需要知道你的控件摆在哪个位置和确定它的大小,显然地这很难让你的客户方便地获得适应客户屏幕和习惯的布局,所以我们更常用的是自动定
位;自动定位仍然不够灵活,这时我们可以使用基于约束的布局,顾名思义,这是一种通过描述其与容器的关系来实现布局的方法,通过使用子组件的
top
、
bottom
、
left
、
right
、
horizontalCenter
或
verticalCenter
样式属性来指定限制。关于这方面的更多内容,可以通过上面推荐的第三篇文章来了解。
HBox
、VBox
和 Spacer
这两个
Box
类是“看不见”的控件,用来约束其中的组件布局。如果你用过
wxWidgets
那一定对它们相当熟悉了,这种基于
Box
的布局方法加上约束属性,可以很容易地做出随着父控件的大小变化而相应地保持比例的变化,唉啊,想起当年用
MFC
实现这样的效果,我写了多少代码,调试了多少个夜晚啊!
在
Box
控件中,某两个控件之间的距离由
verticalGap
属性设定,默认值并不是
0
,所以如果你想把两个控件紧挨在一起,需要手动把它设置为
0
;如果你想单独地调整某两个控件间的间隔,那么可以使用“看不见的看得见的”控件
Spacer
来隔开它,
Spacer
在界面上显示为一个纯透明的组件,所以看不见,但又能起到空白的作用,所以又看得见,它的
width
和
height
属性可以相对应地让
HBox
和
VBox
控制的组件更加漂亮。
ApplicationControlBar
如果你用
Win32 SDK
或
MFC
界面编程的经历,你一定为“在工具栏上加一个
ComboBox
或
Edit
的需求”而抓狂过吧?现在不用怕了,来到
flex
的世界,像这种问题,用
ApplicationControlBar
是相当相当地小
case
。看看下面这个图多复杂,用了它,就是一个
1 + 1 = 2
的小
case
了。
DividedBox
、HDividedBox
和 VDividedBox
别说是用
MFC
,哪怕是用
wxWidgets
,做一个可以随时拖放改变切分比例的分割组件也是困难的,但到了
Flex
的时代,一切都变得非常容易了,使用
DividedBox
及其子类可以像使用
Box
及其子类那样方便地分割组件,下面就是一个活生生的例子,拖动中间的分隔条,可以随时改变大小比例。
除了这些以外,还有最常用的容器
Canvas
、
ApplicationControlBar
的基类
ControlBar
、很有
web
特色的
Form, FormHeading, and FormItem
、与
Box
类似的
Grid
、以及
Panel
、
Tile
和
TitleWindow
,这些类都可以在手册里看到,还是那句话:有空的时候,
read the fucking manuals
;工作的时候,
google is your friend
。
分享到:
相关推荐
国庆期间,做了不少基于 flex 的开发工作,对 flex 的布局容器有了进一步深入的理解,也找到不少非常棒的文章,分享到这里方便一下大家。
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 FlexLayout布局(学习版)微信小程序源码 ...
flex布局笔记
微信小程序开发中flex布局容器及元素之属性技术释疑.pdf
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
Flex_布局与容器 部分容器的介绍和例程。
关于Flex布局的笔记整理,能够详细理解Flex布局原理和用法,仅供自己学习。
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
Flex布局学习资料,2018年整理的不错的Flex布局学习教程
网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
本源代码将研究学习微信小程序的FlexLayout布局实例,微信小程序界面设计实例,是一种流布局的实现例子,而不是大家熟悉的盒子式布局,据说即使需要深层的嵌套,FlexLayout布局的响应速度也不会超过1ms,可谓是非常...
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
flex 页面布局教程 详细介绍了页面的各个组件
这是作者自己亲自编写的教程,里面包含的有图解教程,各式jar,及配置文件,全部包含在内,如果你是一个决定学习flex初学者,我敢保证它肯定适合你!带上你走上flex开发旅途!
可以实现flex布局的基本功能,flex的基本布局模板
Flex入门到提高学习笔记(CHM格式)
单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用...
Flex特效_可拖动弹出窗口布局容器TitleWindow.zip )