`
schy_hqh
  • 浏览: 544100 次
  • 性别: 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布局容器及元素之属性技术释疑.pdf

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

    flex容器的布局,图片样式效果设计,自定义鼠标指针。导入就可以看到效果

    Flex_布局与容器

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

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

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

    CSS3样式表-定位之Flex布局.pptx

    采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴...

    Flex特效_可拖动弹出窗口布局容器TitleWindow.zip )

    Flex特效_可拖动弹出窗口布局容器TitleWindow.zip )

    Flex的容器的说明及应用

    Flex的容器的说明及应用  布局容器  导航容器

    flex弹性布局的理解。

    1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...

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

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

    FLEX技术之四——界面布局和导航

    flex界面布局和导航,flex各个控件的使用,布局的容器和布局的空间,详细的代码演示

    Flex3界面布局中文教程

    Flex3界面布局中文教程 Canvas layout 容器 1 Absolute模式 1 constraint-based模式: 2 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 7...

    Bootstrap 4 Flex(弹性)布局

    Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 创建显示在...

    动画演示flex属性 - 可点击切换属性

    动画演示flex布局,包括flex父容器属性以及flex布局子元素属性 flex父容器属性有: 一. flex-direction 主轴方向 row:从左到右 row-reverse:从右到左 column:从上到下 column-reverse:从下到上 二. flex-wrap 子元素...

    Flex3 界面布局教程

    Canvas layout 容器 1 Absolute模式 1 constraint-based模式: 2 Vbox或者Hbox 布局 3 ControlBar layout 容器 4 ApplicationControlBar 容器 6 DividedBox, HDividedBox 和VDividedBox 布局 8...

    Re-Flex:可调整大小的Flex布局容器组件,用于高级React Web应用程序

    Re-F | ex是我创建的基于React flex的布局组件库,因为在那里发现的所有组件都不能满足我的要求。 它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示: import ...

    flex布局简单总结

    一、flex 布局是什么? Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。...定义了一个flex容器,它的直接子元素会接受这个flex环境 flex-direction row,row-reverse,column,co

    详解CSS3伸缩布局盒模型Flex布局

    一、Flex 布局是什么?...Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小它们以防止溢出容器。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。

    flex-layout-demo:Flex布局教程,包含示例代码

    flex-layout-demo参考:[1] [2] [3] [4]Flex布局简介Flex英文为flexiable box,翻译为弹性盒子,Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性,任何一个容器都可以指定为Flex布局,设置方法为:.box{...

    Flex中通常使用布局组件DashBoard

    一个组件,相当一个容器,里面可以放好多似类面板的控件,这些控件在这个容器里面可以施动,最小化,最大化。

Global site tag (gtag.js) - Google Analytics