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 容器中，则无需执行任何特殊操作即可使百分比大小正常工作。