`
传说の黄花菜
  • 浏览: 202656 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Flex容器详解----概要介绍(一)

    博客分类:
  • Flex
阅读更多

 

容器简介:

 

容器提供了一种可以使你灵活布局子组件的层次结构机制。我们可以通过容器方便的改变子组件的大小和位置。通常在Flex种有两种形式的容器:布局和导航。

 

容器可以在Flash Player的界面上方便定义矩阵形式的UI,在容器中我们可以同时设置一些空间和子容器,我们可以叫在容器内定义的任何组件为该容器的孩子。Flex为我们提供了各式各样的容器,如一些常用的box容器,panel form等。

 

在一个Flex程序的根部是一个叫做Application Container的容器,代表整个Flash Player的画图面板,这个容器用来装载该程序中其他所有的控件和子容器。

 

一个特定的容器一般都会预先定义一些相应的规则用来约束其子容器的布局,如改变大小或位置等。Flex定义这些布局规则可以使我们大大简化设置可以和RIA的实现,也使我们可以足够灵活的创建其他容器。

 

关于从其的布局:

 

容器一般自己预先定义了一些导航和布局的规则,因此你不需要花额外的时间去定义它们,因此你可以集中精力在信息的传递,用户的体验上,而不需要太担心一些事件的设置以及程序显示等。

 

预先定义布局规则的另外一个优点是可以使用户习惯于这种形式,而不是不断接受各种新布局形式,让用户不断去适应新的界面,从而可以让用户把更多的精力放在更重要的信息内容上。

 

不同的容器定义了不同的布局规则:

 

l  除了Canvas容器外,其他所有的容器都自持自动(automatic)布局,在这种类型的布局中,我们不需要去举止指定一个组件的坐标(xy),相反,我们可以通过调整容器的各种属性去布局,如调整子组件之间的位置顺序,如果设置一些容器得子属性,如gaps,或者设置一个Spacer子控件等。举个例子,我们可以用HBox来让子控件呈水平排列。

l  Canvas容器采用的是绝对布局形式,这样我们可以随意指定一个子组件的XY坐标,另外我们也可以用constraints-base布局来控制离父容器的边距,底线和中心点。

 

更多详细的信息请参阅http://livedocs.adobe.com/flex/3/html/size_position_1.html#65267

 

关于布局容器和导航容器

 

Flex定义了两种类型的容器:

 

布局容器: 用来控制子组件的大小和位置,比如Grid布局容器规定了其子组件的形式就像HTML中的table一样,而DividedBox容器在中间有一条分界线,可以让用户随意拖动分界线来改变分界线两侧区域的大小。而TitleWindow容器也提供一个bar,她能包含标题和状态的信息。更多容器组件的使用,请参阅http://livedocs.adobe.com/flex/3/html/layouts_01.html#365481

 

导航容器 主要提供导航让用户选择各种功能,如菜单容器,tab容器等,更多信息请参阅http://livedocs.adobe.com/flex/3/html/navigators_1.html#65267

 

使用容器

 

容器的矩阵区域封装了他的内容范围,只有这个范围内才可以防止子组件,容器的padding(内边距)和两边的宽度决定了容器的大小,容器的padding分为bottomtopleftright。每部分都可以设置px大小,下图显示了容器的paddingborder和相应的区域。

 



  

A.      Left padding B. Right padding C. Container D. Content area E. Top padding F. Bottom padding

尽管我们可以只用一种容器就可以布局一个flex程序,但是通常为了简化工作量,我们都用各种flex为我们提供的容器。如下图就使用了三种容器:

 



 A.
     
Parent HBox layout container B. Child VBox layout container

 

在这个例子中,两个VBox被放在了一个HBox中。

 

HBox中的子组件都是水平流水线布局的,我们可以通过设置horizontalGap verticalGap来控制gap

 

VBox中的子组件是垂直排列的。下图显示了VBox的布局形式:

 



 

 

A.      Parent VBox layout container B. Child VBox layout container

 

布局容器的主要用途是用来排列他的子组件,这些组件可能是其他组件的容器或者是一些普通的控件,下图显示了一个VBox中有三个子组件:

 

 

 

 

 

利用Form布局容器,我们可以创建基于表单的应用程序。在这个容器中用户可以轻松布局各种形式的表单控件,如下图:

 

 

 

Form容器还可以利用Flex提供的验证机制在用户提交表单之前验证一些error。这样就可以在用户提交之前纠正一些客户端能错误,从而减少和server的链接开销。更多有关表单容器的知识请参阅http://livedocs.adobe.com/flex/3/html/layouts_08.html#109973

 

 

导航容器,如TabNavigatorAccordion容器,里面预先设置了许多子容器,可以使哟过户方便的移动到自己需要的信息部分,如下图展示了一个Accordion容器:

 

 

 

 

A Accordion按钮

我们可以点击不同的Accordion按钮跳转到不同的子容器中,Accordion容器定义了一系列子panel可以让我们点击Accordion按钮访问。更多信息请参阅http://livedocs.adobe.com/flex/3/html/navigators_5.html#246009

 

 

Flex容器简介

 

下表列出了一些常用的Flex容器

 

容器名

类型

简介

Accordion

 

 

导航

 

 

将不同类型的信息放入一系列定义好的panel中,在任何时间内总是有一个panel处在激活状态

 

ApplicationControlBar

 

布局

用来存放子组件并提供全局导航和各种应用程序的命令。可以被放在一个Application容器的最顶端。

Box (HBox and VBox)

 

布局

以水平或者垂直的方式布局子组件。

Canvas

 

布局

该容器中的子组件必须明确的给定坐标位置。

ControlBar

 

布局

可以将子组件放置在一个panel或者TitleWindow的下边缘。

DividedBox (HDividedBox VDividedBox)

 

布局

水平或者垂直的布局其子组件,类似Box容器,只是其中多了一条水平或者垂直的分界线将容器分割成两个区域。

Form

 

布局

可以用来设计一个表单

Grid

 

布局

可以布局一个类似HTML table的形式

Panel

 

布局

显示一个title bar,一些说明,边框和一些子组件

TabNavigator

 

导航

可以设置许多tab,选择不同的tab选项卡可以切换到不同的内容区域。

Tile

 

布局

有点类似grid 可以指定行数和列数。

TitleWindow

container

布局

类似一个window窗口,有关闭按钮,标题栏,菜单栏等。

ViewStack

 

导航

一个类似栈的导航容器

 

 

 

 

  • 大小: 5.5 KB
  • 大小: 6.6 KB
  • 大小: 7.2 KB
  • 大小: 6.6 KB
  • 大小: 15.4 KB
  • 大小: 37.1 KB
1
0
分享到:
评论

相关推荐

    CSS Flex布局详解及其重要属性应用

    详述了flex布局下父级flex container及子元素flex item的相关属性,具体介绍了flex-direction、flex-wrap等关键属性,并详细阐述justify-content、align-items等排列与对齐的方式及其对页面的影响。 适合人群:前端...

    flex air开发指南

    ### Flex AIR 开发指南知识点详解 #### 第一章:开始Adobe AIR之旅 ##### 1.1 什么是Adobe AIR - **定义**:Adobe Integrated Runtime (AIR) 是一款跨操作系统的运行时环境,允许开发者利用现有的Web开发技术(如...

    kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm

    Rocky Linux 8.10内核包

    Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用(复现论文或解答问题,含详细可运行代码及解释)

    内容概要:本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC(模数转换器)。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案,因为这种结构能在音频带宽内提供高噪声整形效果,并且多位量化可以降低量化噪声。接着,文档展示了具体的Simulink建模步骤,包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外,还进行了参数设计与计算,特别是过采样率和信噪比的估算,并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标,最终证明所设计的ADC能够达到预期的技术标准。 适用人群:电子工程专业学生、从事数据转换器研究或开发的技术人员。 使用场景及目标:适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。 其他说明:文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程,同时附带了一些辅助函数帮助分析仿真结果。

    计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计:考研复习资源集成与优化

    内容概要:该题库专为研究生入学考试计算机组成原理科目设计,涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题,并提供详尽解析,帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》(第5版)和唐朔飞《计算机组成原理》(第2版)的全部课后习题解答,这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题,注重基础知识与重难点内容,帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点,精心编制两套全真模拟试题,并附标准答案,帮助考生检验学习成果,评估应试能力。 适用人群:计划参加研究生入学考试并报考计算机组成原理科目的考生,尤其是需要系统复习和强化训练的学生。 使用场景及目标:①通过研读名校考研真题,考生可以准确把握考研命题趋势与难度,有效评估复习成效;②通过经典教材课后习题的练习,考生可以巩固基础知识,掌握解题技巧;③通过章节题库的系统练习,考生可以全面掌握考试大纲要求的各个知识点,为备考打下坚实基础;④通过模拟试题的测试,考生可以检验学习成果,评估应试能力,为正式考试做好充分准备。 其他说明:该题库不仅提供详细的题目解析,还涵盖了计算机组成原理的各个方面,包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作,注重理解与应用,以提高应试能力和专业知识水平。

    __UNI__DB9970A__20250328141034.apk.1

    __UNI__DB9970A__20250328141034.apk.1

    minio-rsc-Rust资源

    rust for minio

    4-4-台区智能融合终端功能模块型式规范(试行).pdf

    国网台区终端最新规范

    《基于YOLOv8的化工管道焊缝缺陷检测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    python源码-1个机器学习相关资源

    一个简单的机器学习代码示例,使用的是经典的鸢尾花(Iris)数据集,通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

    pyqt离线包,pyqt-tools离线包

    pyqt离线包,pyqt-tools离线包

    《基于YOLOv8的船舶机舱灭火系统状态监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    SQL常用日期和时间函数整理及使用示例

    SQL常用日期和时间函数整理及在sqlserver测试示例 主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

    GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml

    GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

    T_CPCIF 0225-2022 多聚甲醛.docx

    T_CPCIF 0225-2022 多聚甲醛.docx

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计

    蚕豆脱壳机设计.zip

    蚕豆脱壳机设计.zip

    附件2-2:台区智能融合终端入网专业检测单位授权委托书.docx

    台区终端电科院送检文档

    Y6一39一No23.6D离心通风机 CAD().zip

    Y6一39一No23.6D离心通风机 CAD().zip

    django自建博客app

    django自建博客app

Global site tag (gtag.js) - Google Analytics