更新 UIComponent 大小

Question

我创建了一个扩展 UIComponent 的 AS3 类，以便我可以轻松地将其添加到我的 MXML 布局中。它工作正常，但我试图弄清楚如何动态更新 UIComponent 宽度和高度。我希望我的超级 UIComponent 在内容周围绘制边框，因此我需要获取特定的“内容”尺寸才能执行此操作。

我理解 UIComponent 的想法是您应该专门设置宽度和高度...但我实际上只是扩展它，以便我能够轻松地通过 MXML 使用我的自定义组件。

有没有一种方法可以获取 UIComponents“内容”的宽度和高度？

谢谢

Answer 1

就像 Robusto 在他的评论中描述的那样，如果您想向其中添加子项，Canvas 可能是更好的选择。 Canvas 实例化一个 CanvasLayout，它处理调整自身和子级大小的所有复杂逻辑。

UIComponent 内容的宽度和高度在 measure() 方法中确定，除非 UIComponent 已定义显式大小或百分比大小。测量是没有详细记录的方法之一。我建议深入了解 Flex 组件生命周期与EffectiveUI。他们深入探讨生命周期方法并真正解释如何使用它们。

如果父级（您的组件）没有定义任何大小调整，则调用 measure() 方法。然后它会遍历所有子项，计算它们的大小，并将它们汇总为 measuredWidth 和 measuredHeight。然后将父级的大小设置为这些值。

如果扩展 UIComponent，则必须在 measure 方法中执行大量操作来处理所有边缘情况：显式、百分比、约束（顶部、左侧...）、填充，无论是否 includeInLayout = true 等等。Canvas 可以做到这一切。与其他容器组件相同：Box、HBox、VBox、List 等。

希望有帮助，
槊

Answer 2

不确定 UIComponent 的“内容”是什么意思。您是指 UIComponent 的尺寸，还是子容器的尺寸？

您可以查找任何组件的大小的一个地方是其 updateDisplayList 方法，这是一种您必须重写的受保护方法，如下所示：

override protected function updateDisplayList(width:Number, height:Number) {
  super.updateDisplaylist(width, height);
  // your statements here
}

您说您只是扩展 UIComponent，以便您能够使用自定义组件“ MXML 很容易。”但您仍然需要根据需要扩展它，以便完成您需要做的事情。为此，您应该了解组件的生命周期，何时覆盖 createChildren()、commitProperties()、measure() 和其他方法，等等。其实并不难，而且你已经迈出了第一步。祝你好运！