`
schy_hqh
  • 浏览: 558154 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

(二)Flex4 容器与布局

 
阅读更多
MXML文件
1.文件头
2.命名空间
3.历史版本的恢复
4.利用Flash Builder的debugger
----------------------------------------------------------------------------------
容器(包含组件)+布局对象---实现组件的定位,即决定了一组元素如何在屏幕上显示
-------------------------------------------------
容器
容器:包含和分组其它组件的特殊组件
组件:组件被容器所包含,则称为容器的子元素
换肤:按照一定规则为容器所包含的组件定义位置和次序的过程
对容器而言,它的外观涉及:背景、边框、阴影等
容器的分类:
1.可以在屏幕上的外观(以下都是SkinableContainer,支持换肤)
Application Flex应用的根元素
NavigationContent  与ViewStack控件联合使用,实现导航
Panel 有边框,可以有标题和控制条
SkinableContainer 与Group功能一致,支持换肤
BorderContainer 有边框


2.只为容纳其子元素,容器本身不可见
Group 只用来包含子元素,不可见

3.其它容器(以下容器布局方式与1,2的布局不同)
DataGroup
SkinnableDataGontainer
Form
组件
1.LayoutElement
Button、Checkbox组件等
2.GraphicalElements
方块、圆形等
----------------------------------------------
布局对象
分两种
1.Flex4提供的布局对象(通过<layout>来指定需要使用的布局对象)
  如果没有指定布局对象,则默认使用BasicLayout,除非为每个子元素指定x,y坐标,否则都将出现在(0,0)位置
BasicLayout 支持绝对定位的基本布局对象,必须知道每个布局元素的x,y坐标
HorizontalLayout 水平布局
VerticalLayout 垂直布局
TileLayout 按照行和列布局,指定子元素何时开始新行和新列
2.在Flex4提供的布局对象基础上自定义布局

3.Scroll滚动条
Flex4中,想要某个区域可以滚动,需要特别指定才能使用
使用方式:在容器外部加一对Scroller标签
说明:Scroller只在不能完全显示某个容器中的子元素时,才会根据情况添加水平/垂直滚动条
如果没有指定宽度和高度,Flex会尽可能完全在屏幕上显示该容器
4.MXML标签
类实例 class instance
属性 property/attribute
5.控制条 control bar
在控制条上摆放一个标签和导航按钮
controlbarlayout
定义布局对象
controlbarcontent
定义控制条中需要呈现哪些子元素

6.结合Source和Design视图定义组件及其分布
Design视图中可以通过拖拽方式增加容器或组件
通过outline可以快速定位组件
选定某个组件后,可以通过其Properties设置id,width,height,x,y,约束等
通过定义的id,相当于对该标签对应的类的对象进行了引用,在xml的script中就能通过id来访问或者设置其attribute值

7.基于约束的布局
相对于父容器的边界进行定位,父容器将需要设置为BasicLayout
Application SkinableContainer  Panel  Group 都可以使用BasicLayout
当使用了约束布局,浏览器窗口动态调整时,控件相对于父容器的位置都是固定的
Properties-->Layout-->Constraints中进行设置

8.通过视图状态实现界面的切换(导航的一种实现方式)
创建一个新的视图状态,在此状态下设计需要显示的组件
当应用程序切换到此状态时,就会显示此状态下的组件,实现界面的切换
注意:应用程序会自动创建一个默认状态state1
通过定义includeIn属性实现哪个状态下包含哪个组件
如:<datagrid includein="cartView">则在cartView状态下,DataGrid将被呈现
对于width,height同样可以使用状态(Flex中可以在相应的状态下使用对应的属性值)
width.cartView="0" height.cartView="0"
表示在cartView状态下,某个组件的宽和高都设置为0

控制状态视图:
即什么时候呈现该状态下的视图
每个MXML页面都有一个当前状态currentState属性,通过对该属性赋予不同的状态,就能控制应用程序在指定

的某个条件下将某一状态呈现给用户
currentState=""将应用程序重置为初始状态
9.代码的重构
当完成功能后,应该尽可能对代码进行重构
目标:低耦合,程序各部分依赖性不强;减少重复和冗余,实现单点维护
初学的难点:
实现同一个目标的有哪些方法,以及哪种情况下使用哪个解决方案最行之有效!!!
使用HGroup,VGroup
分享到:
评论

相关推荐

    微信小程序开发中flex布局容器及元素之属性技术释疑.pdf

    微信小程序的Flex布局不仅仅是简单的线性排列,还可以通过嵌套多个flex容器来创建更复杂的布局结构。开发人员可以在微信开发者工具中预览布局效果,并根据效果调整相关属性,以达到期望的布局效果。 综上所述,Flex...

    flex容器的布局,图片样式效果设计

    在Web开发领域,Flex容器的布局是构建动态和响应式用户界面的重要技术。Flex布局,全称为Flexible Box布局,是CSS3的一种布局模式,旨在解决传统盒模型在处理复杂、多列或响应式布局时的局限性。它允许开发者轻松...

    flex布局Flex实现常见布局的汇总

    先简单介绍一下,要使用flex布局,需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了,在flex里存在两根轴,叫主轴和交叉轴,互相垂直,主轴默认水平,flex子元素...

    flex布局布局篇

    在Flex布局中,采用Flex布局的元素被称为Flex容器,其所有子元素则自动成为容器成员,被称为Flex项目。容器可以指定子项目沿主轴(main axis)或交叉轴(cross axis)的方向排列。 #### Flexbox属性 - **display**...

    Flex_布局与容器

    Flex_布局与容器 部分容器的介绍和例程。

    基本布局_flex基本布局模板_flex_

    `:这是开启Flex布局的关键,将容器设置为Flex容器。 - `flex-direction`: 定义了主轴的方向,可以是`row`(默认,从左到右)、`row-reverse`(从右到左)、`column`(从上到下)或`column-reverse`(从下到上)。 ...

    弹性布局-flex布局.zip

    3. **属性调整:** Flex容器可以通过以下属性控制子元素的布局: - `flex-direction`:定义主轴的方向(从左到右、从右到左、从上到下或从下到上)。 - `flex-wrap`:决定子元素是否换行以及换行方式。 - `...

    flex实现的删除子容器

    - **容器(Flex Container)**:设置`display: flex`或`display: inline-flex`的元素成为Flex容器,它的所有直接子元素自动成为Flex项目(Flex Items)。 - **主轴(Main Axis)与侧轴(Cross Axis)**:主轴是...

    flex移动布局,极简公共样式包,附demo

    `:启用Flex布局,将元素转换为Flex容器。 - `flex-direction`: 控制子元素的主轴方向,可以是`row`(默认,水平方向)、`row-reverse`、`column`或`column-reverse`。 - `justify-content`: 定义沿主轴的对齐方式...

    flex布局分享.pptx

    **Flex容器属性**: 1. `flex-direction`:此属性定义了主轴的方向。有四个可能的值: - `row`(默认值):主轴是水平方向,从左到右。 - `row-reverse`:主轴是水平方向,从右到左。 - `column`:主轴是垂直...

    flex布局实例DOM

    在Flex布局中,容器被设置为flex容器后,其内部的子元素就成为flex项目。通过调整各种flex属性,可以轻松控制这些项目的顺序、大小和位置,无论它们的原始尺寸如何。主要的flex属性包括: 1. `display: flex`:这是...

    前端-flex布局案例

    在Flex布局中,父元素被称为Flex容器,可以通过设置`display`属性为`flex`或`inline-flex`来开启Flex模式。一旦容器变为Flex容器,其子元素就成为Flex项目。 3. **Flex方向** Flex布局有主轴(main axis)和侧轴...

    Flex布局学习资料

    1. **基础概念**:Flex容器(flex container)和Flex项目(flex item)是Flex布局的基本组成部分。容器设置为`display: flex`或`display: inline-flex`后,其子元素自动变为Flex项目。 2. **主轴与侧轴**:Flex布局...

    Flex布局笔记.docx

    - `display: inline-flex`:创建一个行内Flex容器,元素与其他行内元素在同一行。 - `display: flex`:创建一个块级Flex容器,元素独占一行,类似于`div`元素。 2. Flex布局模型 Flex布局模型由主轴(main axis...

    flex弹性盒子布局实例

    2. 主轴(Main Axis)与侧轴(Cross Axis):主轴是从flex容器的起点到终点的方向,而侧轴则垂直于主轴。默认情况下,主轴为水平方向,侧轴为垂直方向。 3. 弹性项目(Flex Items):flex容器的子元素,沿主轴排列...

    FLEX主要容器关系图

    在探讨"FLEX主要容器关系图"这一主题时,我们深入解析Flex框架中各种容器组件的层次结构与相互关联,这对于理解和应用Flex布局至关重要。Flex,作为Adobe推出的一款用于开发跨平台应用程序的开源框架,其核心优势...

    flex布局(自用自用自用自用自用)

    Flex布局详解 Flex布局是一种弹性布局方式,可以简便、完整、响应式地实现各种页面布局。...同时,Flex 布局也可以与其他布局方式结合使用,例如 Grid 布局、Float 布局等,以实现更加复杂的页面布局。

    flexcss移动端flex布局神器

    例如,使用`.flex`类开启一个Flex容器,使用`.flex-row`或`.flex-column`设置主轴方向,再结合`.justify-center`或`.align-middle`等对齐类,即可快速创建出所需的布局。 在实际开发中,开发者还可以结合媒体查询...

Global site tag (gtag.js) - Google Analytics