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

Question

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

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

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

MXML:

文本输入宽度="100%"

或者

运行时的 ActionScript :

textinp.percentWidth = 100;

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

Answer 1

Flex 布局的工作方式是让每个组件将其子组件布局为父组件指定的大小。 “子项”确实包括通常的子项——getChildren()、numChildren——以及构成边框、 handle 等的那些组件，它们被称为“chrome”并且是 getRawChildren() 的一部分。

Flex 框架现在对所有组件(实际上是显示树的一部分)执行两次循环。第一个是自下而上(最深的嵌套元素在前)并调用 measure() 方法。它应该计算组件需要多少空间(宽度/高度)，如果它可以有它想要的空间，没有限制(想想:滚动条)并将其放入测量宽度和测量高度属性中。其次，它计算它想要有多少空间作为绝对最小值，放入测量的最小高度/测量的最小宽度。为了计算这一点，使用 getExplicitOrMeasuredHeight()/Width() 询问边框粗细、 Chrome 和普通 child 的尺寸，并将它们相加。这就是为什么它是深度优先的。

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

所以实际上是父容器考虑了相对大小。您的组件声明它是理想的(最小尺寸以便可以显示所有内容)和 measure() 中的最小尺寸，并且必须处理它在 updateDisplayList() 中获得的任何内容。父组件占用它拥有的可用空间，确保每个组件获得最小大小，然后将其余的分配给所有组件。在此阶段，它将查看其子项的百分比宽度/高度属性。

所以如果你想把你的组件放在像 HBox 这样的标准 Flex 容器中，你不需要为百分比大小做任何特殊的事情。