`
keren
  • 浏览: 1582978 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex 4 : 使用容器 API 管理容器子元素

    博客分类:
  • Flex
阅读更多
http://www.slsay.com/archives/62
Spark Group容器、SkinnableContainer容器以及所有的Halo容器,为管理容器的子元素提供属性和方法。因为Spark Group容器和SkinnableContainer容器能够持有很多种子元素,所以用来操纵其子元素的方法指的是拥有通用名称的子元素。

下面的表格展示了这些属性和方法:

Spark容器 Halo容器 说明
numElements numChildern 容器的子元素数量。
addElement( ) addChild( ) 为容器添加自元素作为其最后一个子元素。
addElementAt( ) addChildAt( ) 在容器的指定索引上添加子元素。
  getChildren( ) 得到所有包含的子元素的数组。
getElementAt( ) getChildAt( ) 得到指定索引上的子元素。
  getChildByName( ) 得到带有指定id的子元素。
getElementIndex( )   得到子元素的索引。
removeAllElements( ) removeAllChildren( ) 删除容器的所有子元素。
removeElement( ) removeChild( ) 删除第一个子元素。
removeElementAt( ) removeChildAt( ) 删除指定索引的子元素。
setElementIndex( ) setChildIndex( ) 是这子元素的索引。
swapElements( ) swapChildren( ) 交换两个子元素的索引。
swapElementsAt( ) swapChildrenAt( ) 交换连个子节点的索引。

获得容器或应用程序中的子组件的数量
使用numElements或者numChildren属性来获得容器的展示列表中包含的直接子组件的数目。下面的例子得到了Application容器和Group容器的子元素的数目。Group控件有五个label控件,因此有五个子元素。Application容器有Group和Button控件作为其子元素,因此它有两个子元素。
分享到:
评论

相关推荐

    微信小程序flex布局demo

    这个例子中,`.container`设置为Flex容器,允许子元素换行,所有`.item`子元素将等分空间并自动换行,以适应不同屏幕尺寸。 四、微信小程序特有的Flex布局注意事项 1. WXML和WXSS的分离:微信小程序中,布局样式...

    MapABC Flex4 Demo

    在MapABC Flex4 Demo中,开发者使用了MapABC地图服务API,这是一个专业提供地图数据和定位服务的平台。通过集成MapABC API,开发者可以轻松地在Flex应用程序中嵌入地图,实现地图的浏览、缩放、平移等基本功能。更...

    flex 4 开发帮助文档

    - **容器简介**:提供了对Flex容器的概述,包括它们的作用和使用场景。 - **布局组件**:介绍了如何使用不同的布局策略来组织UI元素。 - **应用程序容器**:重点讲解了用于构建完整应用程序的容器类型。 - **Spark...

    Flex_Css完全手册

    - Flexbox布局:Flex容器允许其子元素在一行或多行上灵活排列,可以自动调整大小和位置,以适应不同的屏幕尺寸和方向。 - Grid布局:Flex CSS也支持网格布局,使得创建复杂的二维布局变得简单,可以精确控制元素的...

    flex事件flex事件flex事件flex事件

    - **Flex容器**:设置`display: flex`或`display: inline-flex`的元素成为Flex容器,其内部的子元素称为Flex项目。 - **主轴和侧轴**:默认情况下,主轴是水平方向,侧轴是垂直方向。可以使用`flex-direction`属性...

    Flex中文基础教程

    - **子元素**:`<mx:TextArea>` 和 `<mx:Button>` 分别代表文本区域和按钮组件。 - **属性**:`text` 和 `label` 属性分别设置了文本区域的内容和按钮的标签。 通过以上介绍,我们可以了解到Flex不仅是一款功能强大...

    对flex栅格系统封装

    1. **Flex容器**:这是Flexbox布局的核心,定义了一个容器,其中的子元素可以沿主轴(flex-direction属性决定)和交叉轴进行排列和调整大小。在栅格系统中,容器通常是整个页面或某个区域,通过设置display属性为...

    flex组件介绍

    #### Flex容器组件与导航控件 Flex不仅提供了容器组件,还有一系列的导航控件,如`TabNavigator`和`Navigator`,用于在不同的内容区域之间进行切换。这些控件对于构建复杂的应用程序界面非常有用,尤其是当需要在多...

    Go-flex-是flexboxCSS布局算法的Go实现

    - **易于使用**:Go-Flex提供了简洁的API,使得开发者可以方便地设置flex容器和子元素的属性,如flex-grow、flex-shrink和flex-basis等。 - **性能优化**:Go语言的编译型特性和内存管理机制使得Go-Flex在处理大量...

    flex开发工具的学习.txt

    - **事件监听**:使用`addEventListener()`方法添加事件监听器。 - **常用事件**:如`MouseEvent`、`KeyboardEvent`等。 #### 四、Flex UI组件详解 ##### 1. 文本显示 - **Label**:用于显示纯文本。 - **Text**:...

    flex剪裁图片demo

    这个容器应该设置为`display: flex`,这样它的子元素就可以沿主轴(默认为水平方向)进行伸缩。 ```css .container { display: flex; } ``` 2. **图片定位**:将图片作为容器的一个子元素,并使用`object-fit: ...

    微信小程序案例之FlexLayout布局.

    `:使容器成为Flex容器,其内部的所有直接子元素称为Flex项目。 - `flex-direction`:控制主轴的方向,可设置为`row`(默认,水平从左到右)、`row-reverse`(水平从右到左)、`column`(垂直从上到下)或`column-...

    Flex Canvas 精灵演示

    在Flex中,Canvas是一个可自定义大小的容器,可以用来容纳其他组件或图形元素。而精灵(Sprite)是ActionScript 3.0中的一个基础图形类,它提供了绘制矢量图形、添加位图、处理事件以及创建动画的能力。精灵可以看作...

    flex加载大图片等待特效

    通过设置`display: flex`,我们可以创建一个Flex容器,并调整其子元素的对齐方式、顺序和大小。在处理大图片时,我们可以利用Flex布局的特性,结合JavaScript和CSS来实现加载等待特效。 首先,我们需要在HTML结构...

    微信小程序源码-FlexLayout布局.zip

    4. **Flex子元素属性** - `flex-grow`: 定义项目的放大比例,如果所有项目的`flex-grow`都为1,则它们将等分剩余空间。 - `flex-shrink`: 定义项目的缩小比例,当空间不足时,按比例减小项目大小。 - `flex-basis...

    flex css5+html5 2.zip

    1. `display: flex`:将一个容器设置为Flex容器,它的所有直接子元素成为Flex项。 2. `flex-direction`:定义主轴的方向(行或列),默认值为`row`。 3. `justify-content`:控制Flex项沿主轴的对齐方式,如左对齐、...

    Web前端技术项目式教程(HTML5+CSS3+Flex+Bootstrap)-教案.zip

    2. 弹性项和容器:容器设置flex属性控制子元素的行为,子元素使用flex属性调整自身大小。 3. 自动对齐:justify-content、align-items和align-self属性用于控制元素在主轴和侧轴上的对齐方式。 4. 弹性比例:flex-...

    flex布局写的移动端app,智能家居管理系统app前端页面.

    在Flex布局中,容器被设定为flex容器,其内部的子元素称为flex项目。通过设置`display: flex;`或`display: inline-flex;`,我们可以将一个元素转变为flex容器。接着,我们可以通过调整各种属性,如`flex-direction`...

    前端开源库-flex-box

    - **容器(Container)**:Flex布局中的主元素,设置为`display: flex`或`display: inline-flex`,使得其子元素可以按照Flex规范进行排列。 - **项目(Items)**:容器内的子元素,遵循Flex布局规则。 - **轴线...

Global site tag (gtag.js) - Google Analytics