Flex_布局和容器

2022-09-13 18:17:17

1、Halo组件也称MX组件，是Flex3的独有组件（按钮、文本字段、容器等）。而Flex4引入了新一代的组件，称为Spark。
Flex4同时支持Halo和Spark。但是很多Halo组件都有更新的Spark组件。

2、布局种类
Spark都支持下面的任何一种布局：
- BasicLayout：绝对布局。使用x，y坐标。
- HorizontalLayout：单行中横向排列。
- VerticalLayout：单列纵向排列。
- TileLayout：网格形式显示组件，创建尽可能多的行和列。

3、绝对布局
绝对布局，使用x，y坐标，允许控制元素的确切位置和大小。
容器的左上角代表坐标原点（0，0）。（Flex中，x坐标从左边开始；y坐标，从顶部开始。）
Application容器默认使用绝对布局。

x，y坐标为负值时，组件会移到视觉范围外。

4、基于约束的布局
在难以确定组件的精确坐标时，可以用绝对布局模式中基于约束的布局方式。基于约束的布局是相对于容器的4个边或容器的中心点来定位组件。
- 4个边: top，bottom，left，right
- 中心点: horizontalCenter，verticalCenter
- baseline：组件的上边与容器的距离
优点是，即使调整窗口大小也可以保持组件的相对位置不变。

5、增强的约束布局（Spark容器不支持，Spark组件支持）
可以在水平和垂直方向上任意创建隐藏的辅助线，然后基于辅助线定位组件。
约束行和约束列的设定（<mx:constraintColumns> <mx:constraintRows>）：
- 固定约束：由绝对数字（像素）来指定
- 相对约束：根据容器大小的百分比来确定
- 内容大小约束：约束行和约束列将和最大项目的大小相同

Halo的Canvas容器支持增强约束，Spark容器不支持增强约束，但是Spark组件可以放到Halo容器中。

6、自动布局
   自动布局模式下，是将容器定向到位置元素中。
   1）使用布局类
      Spark容器有4种布局类，其中BasicLayout是绝对布局，其它下面三种则提供了自动布局选项：
        - HorizontalLayout
        - VerticalLayout
        - TileLayout （自动网格布局）

2）使用空间
<mx:Spacer/>组件可以在布局类指定的方向上，使组件隔开相对的距离。
例： <mx:Spacer width=”50%”> // 使组件平均地分开相对距离

7、容器
   1）Application
      一个应用程序只能有一个，是根容器。
      有个特色属性preloader，是启动Flex程序时的进度条。默认是On的，可以Off。
      可以装载全局变量和函数。

2）Canvas
是一种最基本的容器，是Halo组件。在增强约束时使用。

3）Group
是一个简单容器，和布局类结合使用，默认BasicLayout布局。
子容器有Hgroup和Vgroup。

4）SkinnableContainer
类似Group，支持换肤。

   5）Panel
      基于SkinnableContainer，特点在于添加了一个标题栏和一个框架，并默认给子对象绘制边框。
      默认使用BasicLayout。

   6）ApplicationControlBar
      给程序添加了控制栏，和File菜单类似。要和Application容器结合使用。
      （ControlBar和它类似，但是效果不好，避免）

   7）DataGroup
      用于分组数据，可以使用项渲染器渲染数据，从而自定义显示。默认是BasicLayout。
      需要将数据发送给DataGroup的dataProvider。
      为了显示数据，可以使用如下渲染器：
        - spark.skins.spark.DefaultItemRenderer：显示为简单文本
        - spark.skins.spark.DefaultComplexItemRenderer：显示为Group容器内的组件。只有当数据包含视觉组件时才有效。

8) SkinnableDataContainer
类似DataGroup，支持换肤.

   9）DividedBox、HDividedBox、VDividedBox
      这些是Halo组件，他们允许控制大小的调整。
      DividedBox支持通过direction属性设置水平和垂直布局方式。
      HDividedBox是水平布局，VDividedBox是垂直布局。

   10）Form
      方便布局表单，纯粹是布局目的。
      它包含三个标签
        - Form：主容器
        - FormHeader：可选，添加标题用
        - FormItem：将文本与每个表单输入字段关联

11）Grid
类似HTML的表，*的Grid标签用于标识网格的开始，GridRow用于插入行，GridItem用于向网格中输入数据。

下面是使用容器的简单代码（所用到的Skin代码就省略了，FB默认做成的就行）：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>

        <![CDATA[

            import flash.events.Event;

            import mx.controls.Alert;

            import mx.collections.ArrayCollection;

            private function clickHandler2(evt:Event):void

            {

                Alert.show("Do you want to save your changes?", "Save Changes", Alert.YES|Alert.NO, this);

            }

            [Bindable]

            public var somedata:ArrayCollection= new ArrayCollection(["one", "two", "three"]);

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->

    </fx:Declarations>

    <mx:Canvas width="100%" height="100%">

        <mx:constraintColumns>

            <s:ConstraintColumn id="col1" width="40%"/>

            <s:ConstraintColumn id="col2" width="60%"/>

        </mx:constraintColumns>

        <s:Button label="btn 1" left="col1:10" right="col1:10" top="100"/>

        <s:Button label="btn 2" left="col2:10" right="col2:10" top="60"/>

    </mx:Canvas>

    <!-- SkinnableContainer sample -->

    <s:SkinnableContainer skinClass="helloSkin">

        <s:layout>

            <s:HorizontalLayout/>

        </s:layout>

        <s:Button label="btn skin 1"/>

        <s:ScrubBar width="100" height="10"/>

    </s:SkinnableContainer>

    <!-- ApplicationControlBar sample -->

    <mx:ApplicationControlBar width="80%" top="200">

        <s:Button label="appCtlBar Back"/>

        <s:Button label="appCtlBar Forward" color="0x00ff55"/>

        <s:TextInput width="50"/>

        <s:Button label="Search"/>

    </mx:ApplicationControlBar>

    <!-- DataGroup sample -->

    <s:DataGroup dataProvider="{somedata}" itemRenderer="spark.skins.spark.DefaultItemRenderer" top="300">

        <s:layout>

            <s:HorizontalLayout/>

        </s:layout>

    </s:DataGroup>

    <!-- Form sample -->

    <mx:Form top="400">

        <mx:FormHeading label="Form head info"/>

        <mx:FormItem label="First Name">

            <s:TextInput/>

        </mx:FormItem>

        <mx:FormItem label="Last Name">

            <s:TextInput/>

        </mx:FormItem>

    </mx:Form>

    <!-- Grid sample -->

    <mx:Grid top="600" left="10">

        <mx:GridRow>

            <mx:GridItem>

                <s:Button label="Rewind"/>

            </mx:GridItem>

            <mx:GridItem>

                <s:Button label="Play"/>

            </mx:GridItem>

            <!--

            <mx:GridItem>

                <s:Button label="Forward"/>

            </mx:GridItem>

            -->

        </mx:GridRow>

        <mx:GridRow>

            <mx:GridItem colSpan="2">

                <s:Button label="Stop" width="100%"/>

            </mx:GridItem>

        </mx:GridRow>

    </mx:Grid>

</s:Application>

layout.mxml

8、皮肤
   皮肤文件有两条基本规则：
     - 必须支持组件可能有的所有状态
     - 必须在名为contentGroup的皮肤内定义一个额外的容器

码农公寓

相关文章