`
ltian
  • 浏览: 66106 次
  • 性别: 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代码。
分享到:
评论
3 楼 xiao_kai 2012-06-14  
受教了,谢谢
2 楼 agao1985 2011-02-15  
高端 谢谢了
1 楼 runner1977 2009-07-02  
原来有这么多规则啊, 受教啦!!

相关推荐

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

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

    react-row:React 组件创建用于通过使用 flex 构建基于行和列(可选可调整大小)的复杂布局

    通过使用flex来创建基于行和列(可选可调整大小)构建复杂布局的 React 组件。 概述 这个想法很简单。 您将子组件添加到并且每个子组件都将附加到单独的列中。 每个充当容器,在其中自动计算其尺寸并更改 flex 值。 ...

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

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

    Flex第一步光盘源码

    内容包括:Flex简介、Flex的安装和开发环境的建立、MXML 语法简介、使用容器控制界面布局、使用组件处理数据和交互、使用行为对象和动画效果、ActionScript 3.0编程知识、Flex的事件机制、数据绑定、组件的使用、...

    FlexLayout:多标签版式管理器

    FlexLayout FlexLayout是一个布局管理器,用于将React组件布置在多个选项卡集中,可以调整和移动选项卡的大小。现在使用尝试FlexLayout唯一的依赖关系是React。 特征: 分离器标签标签拖动和排序拖动选项卡集(一次...

    flex3的cookbook书籍完整版dpf(包含目录)

    使用Flex组件工具包创建组件 21.2节.在Flash中使用ContainerMovieClip创建Flex容器 21.3节.导入FlashCS3的组件 21.4节.认识Cairngorm小型结构 21.5节.创建Cairngorm视图、事件和模型 21.6节.创建Cairngorm命令和事务...

    flex-layout:为Angular应用程序提供HTML UI布局; 使用Flexbox和响应式API

    该模块使用自定义的Layout API,mediaQuery observables和注入的DOM flexbox-2016 CSS样式为Angular开发人员提供组件布局功能。 Flex Layout引擎智能地自动化将适当的Flexbox CSS应用于浏览器视图层次结构的过程。 ...

    React-Native中一些常用组件的用法详解(一)

    前言 本文为大家介绍一下React-Native中一些常用的组件,由于对ES6的语法并没有完全掌握,这里暂时用ES5和ES6混用的... flex布局样式 backgroundColor:背景颜色 borderColor:边框颜色 borderWidth:边框大小 bo

    wc-responsive-container:Web组件,允许作者根据包含元素的大小而不是用户视口的大小来控制样式

    wc响应式容器Web组件,允许作者根据包含元素的大小而不是用户视口的大小来控制样式。 基于Philip Walton的使用自定义元素和调整大小观察器。为什么? 如果容器位于会影响容器大小的动态应用程序布局内,例如布局具有...

    flexdashboard:简易的R交互式仪表板

    可以智能地调整组件的大小以填充浏览器并适合在移动设备上显示。 演示图布局,用于呈现可视化序列和相关评论。 (可选)使用动态驱动可视化。 了解有关flexdashboard的更多信息: //rmarkdown.rstudio....

    fangshifeng#ReactNative#《ReactNative系列讲义》基础篇---05.Style and Flex

    一、简介每一个核心组件都自带一个style属性,用来添加组件的样式,比如字体大小、颜色、排列方式,组件的布局方式、位置等等。下面让我们一起来学习一下style样

    split:可调整大小的拆分视图的非标准实用程序

    自2014年以来维护的原始库,可用于float和flex布局。 支持所有浏览器。 -Split.js的后继版,用于grid布局。 支持现代浏览器。 两个React包装器: -Split.js的瘦包装器组件。 薄包装器组件。 学分 贡献者 这个...

    微信小程序整合的一套UI库

    微信小程序组件如此之丰富、你还需要重量级的组件库来冗余代码吗? 所以只需要Wa-UI这个轻量级的库很快捷的做布局就可以了 ##使用须知 import引入即可使用,快速开始 Wa-UI说明文档请参考Wiki IDE更新...

    源码学习-BookChat 微信小程序工程源码

    小程序采用 CSS3 的 flex 实现的页面布局。 开源:基于 Apache 2.0 开源协议进行开源,对商业友好 秀气:简洁、美观,给您焕然一新的视觉体验,让你都不敢相信这是一个后端程序员设计和开发实现的 丰富:注册、...

    wxPayShare

    统一请求处理,错误机制,加载机制封装组件启动项目毛线发球h5响应式方案个人电脑媒体查询flex,百分比初步布局移动端h5字体大小元素大小,布局元素边距,内填充rem + flex媒体查询+百分比+ flex 自由灵活rem布局...

    ordered-columns:Polymer Web组件,可从任意DOM内容构建按垂直顺序排列的列(时间轴)

    这样可以为样式元素提供更好的总体CSS支持,为基于flex /%的大小提供更好的支持,并保留使用nth-of-type CSS匹配器的能力。自动元素排序3栏2列文献资料现场例子 用法使用Javascript包管理器Bower添加库: bower ...

    nice:大而全,清晰明了

    抛球帆布canvas手写签名svg svg画曲线svg画柱形图svg画折线图svg画饼图svg画雷达图svg画环形图svg绘画十年转盘抽奖埃哈特echarts的调整大小和配置ng注解使用响应式表单时间选择器块加载容器倒计时指令权限指令管道...

    challenge-newbie:创建用于对FrontEnd Mentor的新手级挑战进行编码的存储库

    挑战新手 ... flex用于使卡片页脚的内容大小相同。 background-size: cover此属性,可以填充卡标题图像并进行辅助操作, overflow: hidden还使用了overflow: hidden ,可以将其以预定义格式填充。

Global site tag (gtag.js) - Google Analytics