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

Question

我正在尝试使用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（）方法中实现百分比宽度/高度？ 更具体地说，这些百分比在某个阶段转换为像素值，这是如何完成的？

Answer 1

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容器中，则无需对百分比大小进行任何特殊操作。