整理了一下Flex的一些常用的容器组件,参考于Adobe官方说明文当。
Canvas
Canvas容器绘置一个长方形的区域用来放置子组件(其他容器或者控件),与其他容器不同,Canvas子组件的位置必须指定绝对坐标或使用约束条件布局。
Box, HBox, and VBox
Box容器用来横向或者纵向的放置子组件,使用direction属性来决定是横向布局还是纵向布局。HBox,VBox就是指定了direction属性的Box。
ControlBar
ControlBar容器一般与Panel容器或者TitleWindow容器配合使用,比如在Panel容器的底部放置一个ControlBar作为Footer。
ApplicationControlBar
ApplicationControlBar容器一般起到导航的作用,作用于整个应用程序的运行期间,比如我们使用的Word,Excel顶部用来放置工具栏和菜单栏的区域。
ApplicationControlBar容器有2种模式,分别是Docked模式和Normal模式。Docked模式将 ApplicationControlBar容器一直显示的停靠在应用程序的顶部,并且自动将宽度调整为应用程序的宽度。Normal模式可以将 ApplicationControlBar容器以任意的大小放置在应用程序的任何位置。
DividedBox, HDividedBox, and VDividedBox
DividedBox容器类似与Box容器,用来横向或者纵向的放置子组件,不同的是DividedBox用显示的间隔物将自组件分割开,你可以拖动间隔物来扩大或缩小每个子组件所占的空间,HDividedBox和VDividedBox相与DivideBox的区别与HBox和VBox相对与Box的区别一样。
Form, FormHeading, and FormItem
Form是Web应用最为常见的容器了,常见的有用户注册,帐单信息等。FormHeading用来区分每一组Form信息,如用户注册的过程中,可以指定2个FormHeading分别是必添项目和选添项目。FormItem是Form中具体的某一个项目,包含一个Label和若干个控件。
Grid
Grid容器用来以表格的形式放置组件,好比Html中没有Border的Table。Grid容器的每一个单元格(cell)都可以放置0个或1个子组件,如果想要在一个单元格中放置多个控件,那么就在这个单元格中再多加一个容器。Grid中使用GridRow来创建行,用GridItem来创建单元格。类似与Html的table,你也可以使用rowSpan,colSpan来合并单元格。
Panel
Panel容器是一个比较常用的容器,包含标题(title)区域,放置子组件的容器(content)区域,以及边框(border)。content 区域有3种形式,分别是横向布局(horizontal),纵向布局(vertical),绝对坐标布局(absolute)。Panel会很普遍的与 Form结合起来使用,当然还有前面提到的ControlBar组件也是Panel容器中很常用的一个子容器。
Tile
Tile容器将子组件按照表格的形式放置,与Grid容器的区别是,Tile容器每个单元格的大小都是一样的。Tile容器子组件具体的放置位置由 Flex来安排,而Tile容器的宗旨是将所有的子组件都能以横竖排列最佳的位置摆放。比如Tile容器有16个子组件,就将16个子组件以4行4列的位置摆放,如果是15个子组件,也是4行4列摆放,只不过最后一行的最后一列是空着的。
TitleWindow
TitleWindow容器继承与Panel容器,所以TitleWindow拥有Panel的所有特性,而不同的是TitleWindow容器是用来做弹出(popup)面板的。
分享到:
相关推荐
微信小程序开发中flex布局容器及元素之属性技术释疑.pdf
FLEX主要容器关系图,对于掌握flex还是比较有用的
你在使用FLEX编程是否遇到各种问题?那你可以看看这个文档咯,总结了常见问题和解决方法。。
Flex的容器的说明及应用 布局容器 导航容器
flex获得html容器传递的url参数值
先简单介绍一下,要使用flex布局,需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了,在flex里存在两根轴,叫主轴和交叉轴,互相垂直,主轴默认水平,flex子元素...
flex开发过程中的常见问题100问答 flex开发过程中的常见问题100问答 flex开发过程中的常见问题100问答
flex实现的如何删除子容器代码,对于实际开发是有很大帮助的
Flex 常见 编码规范,叫你如何规范代码 命名
微信小程序开发中flex布局容器及元素之属性技术释疑
flex容器的布局,图片样式效果设计,自定义鼠标指针。导入就可以看到效果
动画演示flex布局,包括flex父容器属性以及flex布局子元素属性 flex父容器属性有: 一. flex-direction 主轴方向 row:从左到右 row-reverse:从右到左 column:从上到下 column-reverse:从下到上 二. flex-wrap 子元素...
根据我搭建 flex+java+oracle 项目 遇到 常见的几个问题分析 rendme文档中介绍了 搭建flex+java的步骤 ,保证你不走弯路。
flex 学习文档 Flex 3 Cookbook pdf Flex 3 Cookbook源码
flex container(flex容器 或 弹性容器) flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值: box:将对象作为弹性容器显示。(最老版本)inline-box:将对象...
FLEX自定义拖拽容器 flex写的一个可拖拽的容器系统 有点像背包系统 但背包内元素是图标 这个是容器里面愿意放什么放什么(如列表、日历等) 本资源非原创 从老外那找的 里面是纯代码生成的 支持技术研究(如果是图片...
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
学习Flex过程中常见的一些问题,欢迎大家共同学习,共同研究
详细记录了flex相关的错误编码,针对部分错误有详细的解释和解决
Re-F | ex是我创建的基于React flex的布局组件库,因为在那里发现的所有组件都不能满足我的要求。 它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示: import ...