Flex基础 Flex布局学习手册

开发 后端
你对Flex布局的概念是否理解,本文向大家简单介绍一下Flex布局基础,主要针对Flex初学者,希望本文的介绍能让你有所收获。

本文和大家重点学习一下Flex布局的一些基础知识,对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义。

Flex布局基础

本节仅针对Flex初学者,有一定布局经验者请略过本节。学习本节的***方法,先浏览一遍Demo,查看下载源码,动手实践一下。

对于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布局。右击可以查看源码。

一,Absolute布局

用Flex布局新建Application时,最下面有一个布局属性选项:Vertical,Horizontal,Absolute。意思如单词。若选择Absolute,则Application的子控件依据其{x,y}坐标依靠。但不影响第二代子控件,即,如果放一个HBox到该Application中,HBox中的控件则水平排列。Horizontal与Vertical相当于把Application做为一个水平或竖向的盒子(Box),对子、孙控件的影响关系与Absolute类似。

查看Absolute,不难发现,可视区域的宽度是一定的,无论在何种分辨率下,何种浏览器宽度。但在Web应用中,我们不希望出现这样的效果。相反,我们可能希望控件可以按照百分比自动调整位置。只此一条,开发Web应用,便不建议使用Absolute布局。由此便产生了方便、简单、易用的Box布局。

二,Hbox布局

Flex布局中HBox让子控件按水平方向自动排列,居右、居左或居中都可以。

查看Hbox,控件与前者没有增减,同样的控件。但它可以自适应浏览器宽度。文章的标题栏部分用了一个HBox,其包涵三个子控件:Label,Spacer与LinkButton.Spacer的宽度设为100%,这样无论Label无多少字符,多宽,都可以把LinkButton撑到最右边。同样,也可以把它用在VBox中,则设置其高为100%。Spacer在Box布局中非常实用。
细心的朋友不难发现,这个Application的layout属性是Vertical,整个App相当于一个VBox。最下面的评论文本框与按纽也在一个HBox之内。

三,VBox布局

Flex布局中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或其它布局。

【编辑推荐】

  1. 解析Flex布局容器的使用
  2. Flex基础 创建***个Flex项目
  3. 解析Flex事件执行流程
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 

 

责任编辑:佚名 来源: 博客园
相关推荐

2010-08-04 09:16:48

Flex学习

2022-02-16 15:32:58

FlexUI框架容器组件

2022-02-17 20:07:45

Flex鸿蒙Flex组件

2022-04-15 14:57:57

Flex布局鸿蒙操作系统

2023-02-07 09:01:22

CSS

2010-08-05 13:14:16

Flex布局

2010-08-13 14:39:57

Flex布局

2010-08-09 15:30:00

Flex字体

2010-08-04 13:16:23

Flex项目

2010-07-30 15:18:26

Flex

2010-08-06 10:56:11

Flex4MyEclipse

2010-08-04 11:23:15

Flex字符串

2010-08-05 13:20:41

Flex最优布局

2010-08-06 15:20:25

Flex Builde

2016-11-04 10:49:48

微信小程序

2010-08-05 13:44:12

Flex布局

2017-03-27 09:36:20

Flex布局计算

2010-08-05 13:33:06

Flex布局规则

2010-08-09 09:20:51

Flex程序设计

2010-08-04 09:34:51

Flex设计
点赞
收藏

51CTO技术栈公众号