`
兩ting
  • 浏览: 78106 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

Flex3 组件的定位和布局

    博客分类:
  • flex
阅读更多

Flex 组件的定位和布局


大多数 Flex 容器使用预定义的规则集来自动定位您在其内定义的所有子组件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。

在 Flex 应用程序中定位组件的方法有三种:

  • 使用自动定位
  • 使用绝对定位
  • 使用基于限制的布局

使用自动定位对于大多数容器, Flex 会根据容器的布局规则 (如布局方向、容器填充和容器的子级之间的间隙) 自动定位容器子级。

 

对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果, 或仅有一个临时效果, 因为布局计算将组件的位置设置为一个计算的结果, 而不是指定的值。

 

可以通过指定容器属性控制布局的各个方面。下列属性是最常见的:

layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。当设置为 "horizontal"时, 容器会将其子级布局在一行内。 当设置为 "vertical"时, 容器会将其子级布局在一列内。 有关 "absolute" 设置的信息, 请参阅绝对定位和基于限制的布局上的部分。


horizontalAlign: 可能的值有 "left"、 "center"或 "right"。 
verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。


此示例覆盖 Application 容器的 horizontalAlign 属性的 "left" 的默认设置和Application 容器的 verticalAlign 属性的 "top" 的默认设置以分别指定 "center" 和 "middle"。

 

此示例覆盖 Panel 容器的 layout 属性的 "vertical" 的默认设置, 从而以水平方式显示 Label 和 Button 控件。 Panel 容器的 padding 属性定义容器的空白区 (以像素计)。

 

示例

Java代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application  
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     viewSourceURL="src/LayoutAutomatic/index.html"  
  5.     horizontalAlign="center" verticalAlign="middle"  
  6.     width="380" height="150"  
  7.   
  8. >  
  9.     <mx:Panel  
  10.         title="My Application"  
  11.         paddingTop="10" paddingBottom="10"  
  12.         paddingLeft="10" paddingRight="10"  
  13.         layout="horizontal" verticalAlign="middle"  
  14.     >  
  15.   
  16.         <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>  
  17.         <mx:Button  
  18.             id="myButton" label="Click Me!"  
  19.             click="myLabel.text = 'Hello, World!';"  
  20.         />  
  21.   
  22.     </mx:Panel>  
  23. </mx:Application>  

 

使用绝对定位

 

有三个容器支持绝对定位:

 

如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。 
Canvas 容器始终使用绝对定位。


使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局;否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。

 

此示例将 Panel 容器的 layout 属性设置为 "absolute"。接着, 它会设置 Label 和 Button 控件的 x 和 y 属性, 从而这两个控件会重叠。

 

提示: 使用绝对定位是使 Flex 控件重叠的唯一方法。

 

示例

 

Java代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application  
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     viewSourceURL="src/LayoutAbsolute/index.html"  
  5.     horizontalAlign="center" verticalAlign="middle"  
  6.     width="280" height="170"  
  7.   
  8. >  
  9.     <mx:Panel  
  10.         title="My Application" layout="absolute"  
  11.         width="220" height="90"  
  12.     >  
  13.         <mx:Label  
  14.             id="myLabel"  
  15.             x="10" y="10" width="180"  
  16.             fontWeight="bold" fontSize="24"  
  17.         />  
  18.   
  19.         <mx:Button  
  20.             id="myButton"  
  21.             x="60" y="10"  
  22.             label="Click Me!"  
  23.             click="myLabel.text = &apos;Hello, World!&apos;;"  
  24.         />  
  25.   
  26.     </mx:Panel>  
  27. </mx:Application>  

 

使用基于限制的布局

 

您可以通过使用基于限制的布局同时管理子组件大小和定位子组件, 在该布局中您锚定组件的侧边或中心以相对于组件的容器进行定位。

 

您可以使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。

 

您通过使用子组件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 样式属性来指定限制。

锚定组件的边缘


您可以将组件的一个或多个边缘锚定在其容器的相应边缘的某个像素偏移处。 当容器调整大小时, 锚定的子级边缘保持与父级边缘的距离相同。

 

top、 bottom、 left和 right 样式属性指定组件侧边与相应的容器侧边之间的距离 (以像素计)。

下面的示例中的 Button 控件具有锚定的底边和右边, 与它所在的 Panel 容器的边相距 10 个像素。

 

示例

 

Java代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application  
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     viewSourceURL="src/LayoutConstraintsBottomRight/index.html"  
  5.     horizontalAlign="center" verticalAlign="middle"  
  6.     width="360" height="200"  
  7.   
  8. >  
  9.     <mx:Panel  
  10.         title="My Application" layout="absolute"  
  11.         width="300" height="130"  
  12.     >  
  13.         <mx:Button  
  14.             id="myButton"  
  15.             label="A button"  
  16.             bottom="10"  
  17.             right="10"      
  18.   />  
  19.   
  20.     </mx:Panel>  
  21. </mx:Application>  

 

拉伸组件 如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。 下面的示例中的 Button 控件四个边都已被锚定, 与它所在的 Panel 容器的边相距 10 个像素。

 

示例

 

Java代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application  
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     viewSourceURL="src/LayoutConstraintsEdges/index.html"  
  5.     horizontalAlign="center" verticalAlign="middle"  
  6.     width="360" height="200"  
  7.   
  8. >  
  9.     <mx:Panel  
  10.         title="My Application" layout="absolute"  
  11.         width="300" height="130"  
  12.     >  
  13.         <mx:Button  
  14.             id="myButton"  
  15.             label="A button"  
  16.             top="10"  
  17.             bottom="10"  
  18.             left="10"  
  19.             right="10"  
  20.      
  21.    />  
  22.   
  23.     </mx:Panel>  
  24. </mx:Application>  

 

锚定组件的中心


您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。

 

horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离;一个负数会从中心向左或向上移动组件。

 

horizontalCenter 和 verticalCenter 样式指定从容器中心的偏移 (以像素计), 应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。

 

示例

 

Java代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <mx:Application  
  4.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  5.     viewSourceURL="src/LayoutConstraintsCenter/index.html"  
  6.     horizontalAlign="center" verticalAlign="middle"  
  7.     width="360" height="200"  
  8. >  
  9.     <mx:Panel  
  10.         title="My Application" layout="absolute"  
  11.         width="300" height="130"  
  12.     >  
  13.   
  14.         <mx:Button  
  15.             id="myButton"  
  16.             label="A button"  
  17.             verticalCenter="0"  
  18.             horizontalCenter="0"  
  19.            />  
  20.     </mx:Panel>  
  21.   
  22. </mx:Application>  

 

一个更加复杂的示例

 

下面的这个示例使用基于限制的布局来居中 Label 控件并使 Button 控件拉伸至几乎 Panel 的完全长度。 将 Label 控件的 top 属性设置为 10 以限制它看起来与 Panel 的顶部的距离为 10 像素。 将其 horizontalCenter 属性设置为 10 以完美地将它在 Panel 中居中。

 

将 Button 控件的 left 和 right 属性设置为 10 以使它拉伸至距离 Panel 的每一边都在 10 像素内。 将其底边属性设置为 10 以限制其底边距离 Panel 的下边为 10 个像素。

 

下面的图说明您以可视方式设置的属性的效果。 可视布局控件是 Flex Builder 2 的设计视图的组成部分。

 

 

提示: 不要使用 verticalCenter 样式属性指定 top 或 bottom 样式属性, verticalCenter 值会覆盖其他属性。 类似地, 不要使用 horizontalCenter 样式属性指定 left 或 right 样式属性。

由基于限制的布局确定的大小会覆盖任何显式或基于百分比的大小规范。 例如, 如果您指定 left 和 right 样式属性, 产生的基于限制的宽度会覆盖由 width 或 percentWidth 属性设置的任何宽度。

 

示例

 

Java代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application  
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"  
  4.     viewSourceURL="src/LayoutConstraints/index.html"  
  5.     horizontalAlign="center" verticalAlign="middle"  
  6.     width="360" height="200"  
  7.   
  8. >  
  9.     <mx:Panel  
  10.         title="My Application" layout="absolute"  
  11.         width="300" height="130"  
  12.     >  
  13.         <mx:Label  
  14.             id="myLabel"  
  15.             fontWeight="bold"  
  16.             fontSize="24"  
  17.             top="10"  
  18.             horizontalCenter="0"  
  19.         />  
  20.   
  21.         <mx:Button  
  22.             id="myButton"  
  23.             label="Click Me!"  
  24.             click="myLabel.text = &apos;Hello, World!&apos;;"  
  25.             bottom="10"  
  26.             height="22"  
  27.             left="10"  
  28.             right="10"  
  29.            />  
  30.   
  31.     </mx:Panel>  
  32. </mx:Application>  

 

分享到:
评论

相关推荐

    Flex 组件的定位和布局

    NULL 博文链接:https://shuiyan.iteye.com/blog/634967

    flex组件时间轴组件

    综上所述,Flex组件时间轴是一个结合了Flex布局灵活性和时间序列信息展示的高效工具。通过掌握Flex布局原理和实践,开发者可以创建出功能强大且用户体验良好的时间轴组件,满足不同应用场景的需求。在实际开发中,...

    flex组件

    标题中的“flex组件”指的是在前端开发中广泛使用的Flex布局技术。Flex布局,全称Flexible Box,是一种用于处理容器中子元素布局的CSS3模块。它允许开发者在不同尺寸的设备上灵活地调整元素的大小和位置,尤其适用于...

    Flex3界面布局中文教程

    Flex3 界面布局是Adobe Flex 3框架中用于组织和定位用户界面元素的重要机制。在Flex3中,布局管理主要是通过不同的布局容器来实现,这些容器提供了多种布局方式,帮助开发者创建美观、高效的用户界面。下面我们将...

    flex 高级自定义组件

    这里通常用来初始化组件的内容和结构,但不涉及子组件的布局和定位。而`updateDisplayList()`方法则用于在测量阶段之后,根据组件的尺寸和位置属性来定位和绘制子组件,包括它们的大小和位置。 布局方面的定制,...

    Flex4.5 UI布局与组件应用_Layout

    - **特点**:这是Flex中最基本的布局方式,采用绝对定位,可以通过指定子组件的`x`和`y`坐标来精确控制其位置。 - **应用场景**:适用于需要精确控制每个元素位置的场景。 2. **HorizontalLayout** - **特点**:...

    Flex Tree快速定位树结点

    确保这些元素与Flex Tree组件一起布局,形成直观的交互界面。 2. **事件监听**:为“检索”按钮添加点击事件监听器。当用户点击按钮时,触发定位函数。 3. **数据处理**:在定位函数内部,首先获取文本输入框中的...

    flex自定义组件

    它旨在解决传统布局模式(如流式布局、网格布局和定位)在处理复杂单行或多行布局时的局限性。`Flexbox`以容器为中心,每个子元素都可以灵活地调整大小和位置,以适应不同的空间需求。 在`Flex`布局中,有两个主要...

    Flex 3开发指南

    - **Flex 3**:Flex 3作为Flex系列中的一个重要版本,提供了更多的功能和改进,包括增强的UI组件库、更强大的数据绑定能力以及对多媒体的支持等。 - **Flex 3 Beta 1**:这是一个早期测试版本,主要面向开发者进行...

    Flex3权威指南源码

    4. **Flex组件**:Flex 3提供了一系列丰富的预定义组件,如Button、Label、Canvas等,源码会展示如何使用这些组件创建复杂的用户界面,并进行自定义。 5. **数据服务**:Flex 3支持与各种后端数据源的集成,如AMF、...

    Flex3与Flex4对比

    - **交互式调试**:Flex3与Flex4均支持交互式调试,这对于快速定位问题非常有帮助。 ##### 4. 设计视图 - **CSS外观和样式设计**:Flex3与Flex4均提供了CSS样式的设计支持,使得开发者可以更加方便地调整界面的...

    Flex3 中文版 教程.pdf

    11. **Flex应用程序生命周期**:从创建到销毁,Flex组件有其特定的生命周期,理解这个过程对于编写高效且无内存泄漏的代码至关重要。 12. **项目构建和部署**:教程会讲解如何配置和构建Flex项目,以及将应用程序...

    flex builder 3 plugin part6

    6. **Flex组件库**:Flex Builder 3包含大量预定义的UI组件,如按钮、标签、面板等,开发者可以通过拖放方式快速构建界面。此外,还可以自定义组件以满足特定需求。 7. **版本控制集成**:插件支持常见的版本控制...

    从零开始系列-Flex3视频教程

    第四章"ActionScript 3.0语法基础"深入探讨了AS3的关键语法元素,如变量、数据类型、控制流语句和函数,这对于理解Flex组件的行为至关重要。 第五章"事件和事件机制"阐述了事件处理的基本概念,如何定义和处理不同...

    【完美翻译】Flex组件的生命周期

    Flex组件的生命周期是Adobe Flex应用程序开发中的核心概念,它涵盖了组件从创建到销毁的各个阶段。在Flex中,每个UI组件都有一个明确的生命周期,这个生命周期由一系列的事件和方法组成,开发者可以通过这些事件和...

    flex 官方文档 中文教程

    4. **Flex组件** Flex提供了大量预定义的UI组件,如按钮、标签、列表、面板等,开发者可以通过这些组件快速搭建用户界面。每个组件都有丰富的属性和方法,可自定义样式和行为。 5. **布局管理** Flex支持多种布局...

    移动端web开发flex布局案例

    在移动端Web开发中,Flex布局(Flexible Box布局)是一种强大的CSS布局模式,旨在提供更灵活的盒模型,以便在各种屏幕尺寸和设备上创建响应式布局。本案例将深入探讨Flex布局的应用,以及如何利用它来优化移动端网页...

    FlexBuilder+3+中文教程

    本教程将全面介绍FlexBuilder 3的使用方法和在实际开发中的应用,尤其注重实践操作,帮助开发者掌握其核心功能和常见控件的运用。 一、FlexBuilder 3简介 FlexBuilder 3是基于Eclipse平台构建的,提供了代码编辑、...

    flex3cookbookzhcn_airia

    从初始化、布局计算到渲染,Flex应用程序有一套完整的生命周期管理,理解这个过程对于优化性能和解决布局问题至关重要。 八、图形和动画 Flex支持创建复杂的矢量图形和动画效果,通过DisplayObject类和...

Global site tag (gtag.js) - Google Analytics