Group 的均匀空间子级答案

【问题标题】：Evenly space children of GroupGroup 的均匀空间子级
【发布时间】：2013-04-11 14:23:08
【问题描述】：

通过这个简单的 3 个按钮示例，我怎样才能使按钮间隔均匀。

<s:HGroup width="100%">
    <s:Button label="button 1" />
    <s:Button label="button 2" />
    <s:Button label="button 3" />
</s:HGroup>

目前显示为：

我想要这样的：

【问题讨论】：

button1 左对齐，button2 居中，button3 右对齐。
@Shark：但是如果我有 4 个按钮呢？

标签： apache-flex flex-spark

【解决方案1】：

在按钮之间放置间隔元素并将它们的宽度设置为 100%，以便它们占据所有可用空间。

您可以使用旧的 mx Spacer 来完成这项工作：

<s:HGroup width="100%">
    <s:Button label="button 1" />
    <mx:Spacer width="100%"/>
    <s:Button label="button 2" />
    <mx:Spacer width="100%"/>
    <s:Button label="button 3" />
</s:HGroup>

但如果您想避免使用 mx 类，请使用实现 IVisualElement 的最轻量级的 Spark 类。据我所知，这将是GraphicElement。

<s:HGroup width="100%">
    <s:Button label="button 1" />
    <s:GraphicElement width="100%"/>
    <s:Button label="button 2" />
    <s:GraphicElement width="100%"/>
    <s:Button label="button 3" />
</s:HGroup>

Spacer 扩展了 UIComponent，因此它比 GraphicElement 重。

【讨论】：