四种Flex布局用法指导

开发 后端
本文向大家介绍一下Flex布局的概念,在FlexSDK4(Gumbo)的spark组件库里面增加了一个page:spark.layouts,其中包括了比较重要的四个Flex布局class。

 本文向大家简单介绍一下四种Flex布局的用法,在FlexSDK4(Gumbo)的spark组件库里面增加了一个page:spark.layouts,它包括了比较重要的四个Flex布局class,分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout,这里向你一一介绍他们的用法。

四种Flex布局概述

在FlexSDK4(Gumbo)的spark组件库里面增加了一个page:spark.layouts。其中包括了比较重要的四个Flex布局class,分别是:BasicLayout、HorizontalLayout、TileLayout、VerticalLayout

1、BasicLayout:(默认属性,当不指定定位后,则是绝对定位布局)

这是spark组件默认FlexSDK3的布局方式,即绝对定位布局。
在FlexSDK3里面对应的是:layout="absolute"

2、HorizontalLayout:

这是spark组件库里面的水平布局方式。
在里面对应的是:layout="horizontal"

3、VerticalLayout:

这是spark组件库里面的竖直布局方式。
在FlexSDK3里面对应的是:layout="vertical"

4、TileLayout:

这是spark组件库新增的布局方式,即格子布局方式。
TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。

◆还有一点是需要注意的:

paddingLeft、paddingRight、paddingTop、paddingBottom
这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与FlexSDK3有些区别。也就是说,在spark组件中的容器,已经不具备paddingLeft、paddingRight、paddingTop、paddingBottom属性了。

关于如何使用Flex布局功能:
 

  1. <s:Applicationxmlns:fxs:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009" 
  2. xmlns:s="library://ns.adobe.com/flex/spark" 
  3. xmlns:mx="library://ns.adobe.com/flex/halo" 
  4. width="100%"height="100%"> 
  5.  
  6. <s:layout> 
  7. <s:VerticalLayouthorizontalAligns:VerticalLayouthorizontalAlign="center"paddingTop="30"/> 
  8. </s:layout> 
  9.  

上面的布局解释为:
1、在s:Application下面的布局方式。
2、s:VerticalLayout指定为垂直布局。
如果将<s:layout>.....</s:layout>定义在某个容器里面,那么就是针对于某个容器而定义的Flex布局。

例如:
 

  1. <s:Applicationxmlns:fxs:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009" 
  2. xmlns:s="library://ns.adobe.com/flex/spark" 
  3. xmlns:mx="library://ns.adobe.com/flex/halo" 
  4. width="100%"height="100%"> 
  5.  
  6. <s:layout> 
  7. <s:VerticalLayouthorizontalAligns:VerticalLayouthorizontalAlign="center"paddingTop="30"/> 
  8. </s:layout> 
  9.  
  10. <s:Panelwidths:Panelwidth="400"height="400"title="Panle"> 
  11.  
  12. <s:layout> 
  13. <s:VerticalLayouthorizontalAligns:VerticalLayouthorizontalAlign="center"paddingTop="30"/> 
  14. </s:layout> 

【编辑推荐】

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

 

责任编辑:佚名 来源: chinaunix.net
相关推荐

2010-08-13 13:31:48

Flex效果组件

2010-07-27 15:28:02

Flex DataBi

2010-07-28 13:54:42

Flex数据绑定

2010-08-05 09:33:08

Flex页面跳转

2010-07-28 10:38:29

Flex开源框架

2010-07-30 10:02:40

Flex验证控件

2010-08-05 10:08:06

Flex效果

2010-07-29 09:44:17

Flex编程

2010-08-06 14:28:55

Flex CSS样式

2010-08-06 10:32:49

Flex数据类型

2010-08-13 13:46:04

Flex效果组件

2010-07-27 13:53:15

Flex ComboB

2010-07-28 10:48:48

FlexReport开

2010-08-05 09:05:14

Flex Button

2010-08-02 16:47:46

Flex

2010-08-13 14:39:57

Flex布局

2010-08-13 11:21:31

Flex渲染器

2019-10-25 10:35:49

Java用法场景

2021-10-24 08:37:18

网络监控网络架构网络

2017-12-07 14:40:05

前端FlexCSS
点赞
收藏

51CTO技术栈公众号