Programming Flex2 - 六.布局的管理

翻译 2007年09月20日 23:16:00
Flex的可视组件中,分为容器类和用户操作类。

两者最大的区别在于,容器类不直接响应用户的操作,只对可视组件进行有规则布局。因此,容器类组件的tabEnabled和tabChildren属性,默认分别为false和true。

在Flex中,容器内的元素默认都是匿名的,并继承于UIComponent。如果要自定义能够添加入容器的组件,必须要实现IUIComponent接口。

Flex中的容器就好像Flash Player的显示列表,处理起来也有相同的一些API:
addChild(), addChildAt(), getChildAt(), getChildByName(), getChildIndex(), getChildren(), removeAllChildren(), contains(), setChildIndex(), 以及属性 numChildren。
这些几乎都被重载过,因为不同的容器在元素的添加,删除和摆放上都有不同的规则。和Flash Player的最初方法比起来,某些容器在添加元素上,不仅要加入指定的元素,还要多一些框框条条之类的摆设(chrome:详细解释)。

布局规则
布局规则定义了一个容器在初始时,有元素添加/删除时,或者容器被改了尺寸时,其容器中元素位置和尺寸的计算。
    与之相关的一个属性叫autoLayout,默认为true。当设置成false时,布局规则在初始和元素添加/删除时照旧,但容器尺寸改变时,就不会有任何反应。

在实现规则时,程序首先测量出各元素的大小和之间的距离,然后决定合适的位置。
    与之相关的一个属性叫includeInLayout,默认为true。当设置成false时,程序测量时忽略该元素。

大多数容器的布局规则分为两类:Box和Canvas。

Box布局规则
Box布局规则指定容器内各元素是以水平排放或是垂直排放。水平方向由左向右,垂直方向自上向下。
对应的属性direction值为BoxDirection.HORIZONTAL或BoxDirection.VERTICAL。

如果容器的宽度缺省,则以容器中最宽元素的宽度为容器宽度。
高度亦然。
如果明确设置了容器的宽/高度,当容器中所有元素的宽/高度之和大于设置值时,容器出现滚动条。
如果horizontalScrollPolicy/verticalScrollPolicy设置为off,则不出现滚动条。

一般Box不作为直接使用的容器类型,而采用继承者VBox或HBox。

Canvas布局规则
Canvas布局规则指定容器内各元素都必须明确位置关系。
位置关系分两种,一种是(x,y)坐标定位,另一种称为约束(Constraint)定位。

约束定位定义了6种对应的属性:top,bottom,left,right,horizontalCenter,verticalCenter。前4种是数值,后2种是boolean。

如果设置了元素的top属性,则元素顶部离容器顶部相差top个像素。
如果设置了元素的bottom属性,则元素底部离容器底部相差bottom个像素。
如果同时设置了元素的top和bottom属性,则元素的高度等于容器高度减top再减bottom后,剩余的像素。
left和right规则同上。
如果同时设置了元素的top/bottom和y,则忽略y。left/right和x,则忽略x。
width/height属性可以设置为百分比(在AS中是percentWidth/percentHeight)
一个容器里面的不同元素,可以混合使用坐标定位和约束定位。

混合布局规则
Application,Panel,TitleWindow这些容器同时拥有Box和Canvas布局规则。
由属性layout决定,值为ContainerLayout.ABSOLUTE,ContainerLayout.HORIZONTAL和ContainerLayout.VERTICAL。
第一种是Canvas布局规则,后两者是Box布局规则。

Grid布局规则
类型HTML的Table。
<table>相当于<mx:Grid>
<tr>相当于<mx:GridRow>
<td>相当于<mx:GridItem>
colspan和rowspan属性相当于GridItem的colSpan和rowSpan属性
align属性相当于horizontalAlign
valign属性相当于verticalAlign

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Grid>
        
<mx:GridRow>
            
<mx:GridItem width="100">
                
<mx:Label text="Select a Color:"/>
            
</mx:GridItem>
            
<mx:GridItem>
                
<mx:ColorPicker/>
            
</mx:GridItem>
        
</mx:GridRow>
        
<mx:GridRow>
            
<mx:GridItem colSpan="2" horizontalAlign="right">
                
<mx:Button label="Submit"/>
            
</mx:GridItem>
        
</mx:GridRow>
    
</mx:Grid>
</mx:Application>

Tile布局规则
类似正方化的Grid,所有元素成网格式摆放。
水平和垂直的方向优先性取决于direction属性值等于TileDirection.HORIZONTAL或TileDirection.VERTICAL。
网格的宽高,取决于最宽,最高元素的宽高。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Tile>
        
<mx:CheckBox label="运动"/>
        
<mx:CheckBox label="听歌"/>
        
<mx:CheckBox label="看书"/>
        
<mx:CheckBox label="上网"/>
        
<mx:CheckBox label="旅游"/>
        
<mx:CheckBox label="泡吧"/>
        
<mx:CheckBox label="看电影"/>
    
</mx:Tile>
</mx:Application>

Form布局规则
表单式布局。就两个元素,FormHeading还有FormItem。
两者都各占一行显示。FormItem遵守Box布局规则。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Form>
        
<mx:FormHeading label="Account Information"/>
        
<mx:FormItem label="First Name, Last Name" direction="horizontal">
            
<mx:TextInput id="firstName"/>
            
<mx:TextInput id="lastName"/>
        
</mx:FormItem>
        
<mx:FormItem label="e-mail">
            
<mx:TextInput id="email"/>
        
</mx:FormItem>
        
<mx:FormHeading label="Bug Report"/>
        
<mx:FormItem label="Version">
            
<mx:TextInput id="version"/>
        
</mx:FormItem>
        
<mx:FormItem label="Comment">
            
<mx:TextArea id="comment" editable="true" width="326" height="100"/>
        
</mx:FormItem>
    
</mx:Form>
</mx:Application>

缺口,边框和空袭
paddingTop, paddingBottom, paddingLeft和paddingRight
border
horizontalGap,verticalGap
类似HTML。

容器的嵌入
当一个容器嵌入到另一个容器时,被嵌入的容器性质可视为一个元素。

处理滚动和剪辑
滚动条的对应属性horizontalScrollPolicy/verticalScrollPolicy有3个值auto, off, on。默认为auto。
剪辑的意思是指容器的元素整体尺寸在超越容器尺寸后,是否仍显示超越部分。
对应属性clipContent,默认为false。并且只有在滚动条被明确设置为off时,设置为true才有效。但这样可能会由于强制显示超越部分,而破坏整个布局。

Spacer
还有一个比较特殊的元素Spacer。可以自定义留白的大小。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
<mx:HBox>
        
<mx:Button label="First"/>
        
<mx:Spacer width="40"/>
        
<mx:Button label="Second"/>
        
<mx:Button label="Third"/>
    
</mx:HBox>
</mx:Application>

最后一个比较综合的例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
<mx:Panel layout="horizontal" width="100%" height="100%" title="Putting it all Together">
        
<mx:VDividedBox direction="vertical" width="200" height="100%">
            
<mx:List width="100%" height="200">
            
</mx:List>
            
<mx:List width="100%">
            
</mx:List>
        
</mx:VDividedBox>
        
<mx:Canvas width="100%" height="100%">
            
<mx:Button bottom="10" right="10" label="Save"/>
        
</mx:Canvas>
    
</mx:Panel>
</mx:Application>

相关文章推荐

一起学ReactNative(2) Flex布局入坑手册

前言网上面 关于Flex布局的文章 很多 有些也非常的详细 但是我觉得 学东西 还是得从实践触发 而不是光讲理论对不 今天来跟大家分享一下 自己在学习Flex布局中遇到的各种坑 如文章中有任何的...

移动端的自适应布局神器—Flex Box(2)

讲解Flex Box 布局方式
  • fareise
  • fareise
  • 2017年02月18日 20:06
  • 522

Flex之旅:第二部分:容器与布局(2)---动态添加组件(TabNavigator)

动态添加组件 其实所谓的动态添加组件,就是使用as代码去添加,而不是使用标签去事先定义好。 我定义了一个TabNavigator,初始化时候,没有往里面添加任何的组件。 之后...
  • miqi770
  • miqi770
  • 2015年03月26日 10:23
  • 3419

ReactNative学习六-Flex布局

一、Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display:...

Beginning Linux Programming 笔记(六)使用curses管理基于文本的终端

上一章我们从底层去学习终端的控制,这一章我们将继续讲讲终端,但是我们会从更高的角度来谈。对于一个程序,我们是希望能够比较友好的界面给用户使用,这一章讲的就是如何使用curses去管理我们的屏幕。虽说现...

Flex + j2ee + sh 的电子作业管理系统

  • 2014年11月07日 10:28
  • 35.8MB
  • 下载

Opencv2 computer vision application programming cookbook<六>

第七章介绍提取直线,轮廓及连通区域 包括canny算子检测轮廓,霍夫变换检测直线,直线拟合,提取连通区域及连通区域的形状描述符. #include "stdafx.h" #include   ...

马士兵 J2SE 第11章 GUI编程 GUI初步和布局管理器

/* 范例名称:Frame 应用举例 * 源文件名称:TestFrame.java * 要 点:Frame组件的创建及显示设置 */ import java.awt.*; public c...

Draw2d中的布局管理器Layout比较

最近在研究Eclipse中的GEF开发,在跟着GEF-whole-upload教程做一个GEF应用程序的例子时,发现Figure上的控件无法显示,谷歌了很久也没找到解决方案,最后终于发现是Layout...

Android2——布局管理器

020501  线性布局     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="h...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Programming Flex2 - 六.布局的管理
举报原因:
原因补充:

(最多只允许输入30个字)