Flex布局基础
对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义。若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 Flex中可以像Dreamweaver一样可以拖拽控件;而如果是从Windows Application程序转变而来,则可能更喜欢Absolute布局,让控件散落于页面之上,通过x/y控制其坐标。这种做法让Html设计师觉得可 笑,但我见过有人确实用VS这么做过。
喜欢Div的朋友,可能觉得Box很亲切;喜欢用Table的设计师,对不起,Flex没有Table,Grid虽与之极像,但不宜用来布 局;Application程序员也不要图行事,使用Absolute布局,这种布局不宜开发Web应用,如果只是开发桌面版则无关紧要。
本节写了三个Demo:
◆Absolute布局
◆Hbox布局
◆VBox布局(与前者统称Box布局)
如果开发AIR程序或者桌面应用,可以选择Absolute布局;但如果开发Web应用,推荐学习、研究Box布局。右击可以查看源码。
一、Flex布局之Absolute
用Flex新建Application时,最下面有一个布局属性选项:Vertical,Horizontal,Absolute。意思如单词。若 选择Absolute,则Application的子控件依据其{x,y}坐标依靠。但不影响第二代子控件,即,如果放一个HBox到该 Application中,HBox中的控件则水平排列。Horizontal与Vertical相当于把Application做为一个水平或竖向的盒 子(Box),对子、孙控件的影响关系与Absolute类似。
查看Absolute,不难发现,可视区域的宽度是一定的,无论在何种分辨率下,何种浏览器宽度。但在Web应用中,我们不希望出现这样的效果。相 反,我们可能希望控件可以按照百分比自动调整位置。只此一条,开发Web应用,便不建议使用Absolute布局。由此便产生了方便、简单、易用的Box 布局。
二、Flex布局之Hbox
HBox让子控件按水平方向自动排列,居右、居左或居中都可以。
查看Hbox,控件与前者没有增减,同样的控件。但它可以自适应浏览器宽度。文章的标题栏部分用了一个HBox,其包涵三个子控 件:Label,Spacer与LinkButton.Spacer的宽度设为100%,这样无论Label无多少字符,多宽,都可以把 LinkButton撑到最右边。同样,也可以把它用在VBox中,则设置其高为100%。Spacer在Box布局中非常实用。
细心的朋友不难发现,这个Application的layout属性是Vertical,整个App相当于一个VBox。最下面的评论文本框与按纽也在一个HBox之内。
三、Flex布局之VBox
VBox让子控件在竖直方向上排列。top,bottom or center。
查看VBox,这个App的layout是Horiazontal,相当于一个HBox。一级控件是两个VBox,一左一右。左边与前面的HBox 对应的部分类似。右边用Panel与TitleWindow,还有Grid,Tile。Panel与TitleWindow都具有layout属性,可以 在其内部放置任何子控件,待遇与Application同。值得一提的是Tile,它可让子控件流动延伸,先在x轴上排行,满了之后再换行。 TileList与其类似。
Grid酷似html中的Table,但差别很大,也不适合做布局用。实际应用中,也常用Tile或TileList代替。
Box布局可以满足基本的项目应用,但有一些问题。譬如,文章内容要滚动显示,能不能像Html那样实现流布局?答案是可以的。Box布局只是基本的布局方法,并没有发挥Flex的长处与优势。关于State与流布局在稍后。
在商业项目开发中,Application99%都使用absolute布局,中间所用的容器间有box,tile或其它布局。