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

Question

我正在尝试使用Flex Component框架创建自定义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属性。

因此，如果您想将组件放在标准的Flex容器（如HBox）中，则无需为百分比大小做任何特殊工作。