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

FLEX布局之组件大小的设置(转)

    博客分类:
  • flex
阅读更多
组件的大小(size)就是指组件的高度和宽度。查看Flex帮助,可以看出关于Flex组件大小的属性有很多,以宽度为例,有以下有关宽度的属性:

  * width
  * maxWidth
  * minWidth
  * explicitWidth
  * explicitMaxWidth
  * explicitMinWidth
  * measuredWidth
  * measuredMinWidth
  * percentWidth
  * scaleX
  * 以及组件的MXML标记中的width属性。


如此之多的有关宽度的属性难免让人糊涂,而且,帮助上说的也不是很透彻,因此通过查阅相关文档和源代码,基本搞清了这些属性的含义和相互作用。这些有关宽度的属性中,基本的属性包括:

  * width
  * explicitWidth
  * measuredWidth
  * percentWidth
  * scaleX

明白这些属性之后,自然容易理解剩余的属性。

  * width,组件的当前实际宽度,以像素为单位。为什么会有当前实际宽度的这样的说法呢?因为在Flex中,能够为组件设置相对宽度,即百分比的表示宽度,这时组件当前的实际宽度是根据父容器的宽度动态决定的,开发者无法知道实际宽度的,因此通过读取width属性可以知道其当前实际宽度。

  * measuredWidth是组件的缺省宽度,以像素为单位。可以通过重载组件的measure方法来改变它的值,一般情况下,组件的 measuredWidth都是0。

  * explicitWidth 是显式指定的宽度,以像素为单位。所谓显式指定宽度区别于动态的相对宽度,即区别于百分比宽度percentWidth。开发者设置该属性值时就已经知道到组件在运行时的宽度,故称为显式指定的宽度。该属性同百分比宽度互斥,一旦设置了explicitWidth,则percentWidth的值就会变为 NaN,同理,一旦设置了percentWidth,explicitWidth值就会变为NaN。当用ActionsSript代码设置了组件的 width属性值时,explicitWidth属性会立即被赋予同样的值,同时percentWidth会变为NaN。设置explicitWidth 属性时,percentWidth会立即被设置为NaN,但是width属性则不会立即改变,要延迟组件布局的commit阶段才会变为与 explicitWidth相同的值。

  * percentWidth是指组件的百分比宽度,比如设置组件占用父容器的50%的宽度,那么就设置该属性值为50。该属性同显式指定的宽度(explicitWidth)互斥,一旦设置该属性值,则explicitWidth属性立即变为NaN。

  * scaleX是当前组件宽度的缩放比例。一旦设置属性,考虑到性能,不会立即更新组件的width和explicitWidth属性,延迟到 explicitWidth时会将width和explicitWidth属性值改变。


  除了以上基本属性之外,值得注意的就是组件MXML标记中的width属性。这个属性在编译组件MXML标记时,根据标记的该属性值的格式编译成设置 percentWidth或width属性的AS代码。如果组件MXML标记的width属性后面有百分号(%),则其被编译为设置 percentWidth属性的AS代码,如果组件MXML标记的width后面不带百分号(%),则其被编译为设置width属性的AS代码。 
分享到:
评论

相关推荐

    Flex布局之关于组件的大小

    在深入探讨Flex布局中关于组件大小的管理时,我们首先需要理解Flex布局的基本概念及其如何影响组件的尺寸。Flex布局是一种用于网页布局的强大工具,它能够有效地处理不同屏幕尺寸下的响应式设计,使得元素能够在容器...

    flex组件时间轴组件

    通过使用Flex布局,开发者可以轻松调整元素的大小和位置,以适应不同的屏幕尺寸和方向。 时间轴组件作为Flex布局的一个应用,它通常包含一系列的时间点或里程碑,每个时间点都与特定的事件或信息相关联。这些时间点...

    flex 高级自定义组件

    Flex中的高级自定义组件开发是构建复杂用户界面的关键技术,它允许开发者超越基本组件的限制,以满足特定的业务需求和视觉设计。在创建高级组件时,了解并掌握一些核心方法的重写至关重要,这些方法涉及到组件的生命...

    弹性布局-flex布局.zip

    在移动Web开发中,Flex布局经常用于创建导航栏、网格系统、轮播图、对话框等组件。例如,一个简单的响应式导航栏可以使用Flex布局,通过`justify-content: space-between;`使导航链接在容器中均匀分布,而在小屏幕...

    微信小程序flex布局demo

    在微信小程序中,开发者可以利用CSS布局方式之一的Flex布局来实现复杂的页面设计,提高用户体验。本教程将深入探讨微信小程序中的Flex布局。 一、Flex布局基础 1. Flex容器:在CSS中,一个元素如果设置了`display:...

    flex组件

    “源码”标签暗示了这篇博客可能涉及到了Flex布局的实现原理,可能会讨论CSS的源代码片段,或者讲解如何创建自定义的Flex布局组件。理解源码对于开发者来说是提升技能的重要途径,能帮助他们更好地定制和优化布局。 ...

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

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

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

    ### Flex 4.5 UI布局与组件应用详解 #### 一、引言 随着Web技术的发展,用户界面设计变得越来越重要。Flex作为一种流行的富互联网应用(RIA)开发框架,提供了强大的UI组件库和灵活的布局管理机制。Flex 4.5版本更是...

    Flex 组件边框线样式

    Flex组件边框线样式是前端开发...综上所述,Flex组件边框线样式是一个多维度的设计概念,涵盖边框、标题、内容区域以及与之相关的交互反馈和响应式设计。熟练掌握这些技巧,可以让你创建出既美观又功能强大的Flex应用。

    flex特效组件用法效果

    Flex布局是一种强大的CSS布局模式,允许我们创建响应式和灵活的用户界面。它特别适合用于现代网页和移动应用的设计,因为它可以自动调整元素的大小和位置以适应不同的屏幕尺寸。 首先,让我们理解Flex容器...

    Flex 自定义组件ImageViewer

    4. **updateDisplayList()**: 这个方法用来设置组件及其子组件的大小和位置。ImageViewer可能会在这里计算图像的显示尺寸和位置。 5. **measure()**: 如果组件的大小是自适应的,那么它需要先测量其内容的大小,...

    支持手动拖拽缩放flex组件的组件

    在给定的标题“支持手动拖拽缩放flex组件的组件”中,我们可以推断出这是一个专门针对Flex环境设计的组件,它允许用户通过手动拖拽和缩放操作来调整Flex应用中的组件大小。 描述中提到的“com.janisRadins.zip”很...

    flex组件的所有源文件

    在Web前端开发领域,Flex布局(也称为Flexbox)已经成为现代CSS布局的标准,它可以方便地处理元素的对齐、顺序和大小调整,以达到理想的效果。 在“flex组件的所有源文件”这个压缩包中,我们可以期待找到与Flex...

    flex各组件对应样式

    在前端开发中,Flex布局(Flexible Box)是一种用于创建弹性盒模型的CSS布局模式,它极大地简化了网页和应用程序的复杂布局设计。Flex布局允许我们更灵活地控制元素的排列、对齐和尺寸分配,特别是在响应式设计和...

    flex布局代码及语法讲解

    Flex布局常用于导航栏、页脚、卡片式布局、网格系统、复杂组件等场景。对于初学者来说,理解并熟练运用Flex布局,可以极大地提升网页设计和开发的效率,使页面布局更加灵活多变,适应不同设备和屏幕尺寸的需求。 ...

    Ctrip(flex布局).zip

    `:将容器设置为Flex容器,开启Flex布局。 - `flex-direction`: 决定子元素的主轴方向,可以是`row`(默认,水平方向)、`row-reverse`、`column`或`column-reverse`。 - `justify-content`: 控制子元素在主轴上的...

    swift-OC实现的使用“flex布局”的表格控件

    首先,Flex布局是一种现代的Web和移动应用布局模式,它允许元素在容器内自动调整大小和位置,以适应不同的屏幕尺寸和方向。这种布局方式在iOS开发中特别有用,因为它可以简化多设备适配和自适应设计的工作。 在...

    使用Flex布局实现携程APP首页布局

    1. `display: flex`:这是开启Flex布局的关键,将元素的display属性设置为flex,使其变为Flex容器。在携程APP首页,这个属性可能应用在诸如导航栏、内容区域、底部栏等主要组件上。 2. `flex-direction`:定义了...

    flex组件,功能强大的下拉框

    Flex布局,全称为Flexible Box,是CSS3中的一种布局模式,旨在解决传统盒模型在处理复杂布局时的局限性。通过Flexbox,我们可以轻松地调整元素的大小、顺序和对齐方式,以适应不同的屏幕尺寸和方向。 2. **下拉框...

Global site tag (gtag.js) - Google Analytics