Flex - 自定义组件 - 百分比宽度/高度

我正在尝试使用Flex组件框架创建自定义Flex组件:

http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.

所有好的组件都允许您使用百分比值来定义它们的尺寸:

MXML:

TextInput width ="100%"

要么

运行时的Actionscript:

textinp.percentWidth = 100;

我的问题是如何在自定义组件的measure()方法中实现百分比宽度/高度？更具体地说,这些百分比在某个阶段转换为像素值,这是如何完成的？

Flex布局的工作方式是让每个组件将其子项布局为父项指定的大小."Children"确实包括通常的孩子 - getChildren(),numChildren - 以及组成边框,句柄等的组件,这些组件被称为"chrome"并且是getRawChildren()的一部分.

Flex框架现在对所有组件(实际上是显示树的一部分)执行两个循环.第一个是自下而上(首先是最深的嵌套元素)并调用measure()方法.如果组件可以拥有所需的空间,则应该计算组件将占用多少空间(宽度/高度),没有限制(想想:滚动条)并将其放入measuredWidth和measuredHeight属性中.其次,它计算了它想要的绝对最小空间,放入measuredMinHeight/measuredMinWidth.为了计算这一点,使用getExplicitOrMeasuredHeight()/ Width()询问边框粗细,铬和常规子项的大小,并将它们相加.这就是为什么它是深度优先的原因.

第二个循环是进行实际布局.这从树的顶部开始,并调用updateDisplayList,x/y参数告诉组件它实际具有多少大小.根据这些信息,该组件将告诉其直接的孩子他们应该在哪里(相对于他们的父母)以及他们应该有多大 - child.move(x,y)和child.setActualSize(w,h)

因此,它实际上是将相对大小考虑在内的父容器.您的组件声明它是理想的(最小大小以便可以显示所有内容)和measure()中的最小大小,并且必须处理它在updateDisplayList()中获得的任何内容.父组件获取它具有的可用空间,确保每个组件获得它的最小大小,然后将其余组件分配给所有组件.在此阶段,它将查看其子项的percentWidth/Height属性.

因此,如果您想将组件放在像HBox这样的标准Flex容器中,则无需对百分比大小进行任何特殊操作.