HBox 子组件分隔符

Question

如何在 HBox 子组件周围添加分隔线？

就像如果我选择 borderstyle 作为 hbox 的实体，问题是子组件之间的线，例如文本组件，我可以以有效的方式显示它，而不仅仅是将 HBox 添加到每个元素。

Answer 1

HBox 只是一个具有水平布局的子项的盒子 - 它实际上在这些子项之间没有垂直线，因此您将无法使用边框或 HBox 上的任何内容。

您最好的选择可能是在每个子组件之间添加 VRule 组件，例如：

<mx:HBox width="100%" borderColor="#000000" borderStyle="solid">
    <mx:Image />
    <mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
    <mx:Image />
    <mx:VRule height="100%" strokeColor="#000000" strokeWidth="1"/>
    <mx:Image />
</mx:HBox>

您可以根据需要调整 VRule 和 HBox 边框样式以保持一致。我能想到的唯一其他选项是在每个子组件周围放置边框，而 HBox 上没有边框（可能需要子填充，具体取决于您的组件），将所有组件嵌入 HBox 内的 Box 组件中就像您建议的那样，或者做一些完全疯狂的事情，例如使用 Horizo​​ntalList 并将组件嵌入到与边框大小一致的自定义项目渲染器中。

就我个人而言，我只会使用 VRule 分隔符并继续。我宁愿在孩子身上加倍投入，也不愿将我感兴趣的所有组件都放在 HBox 中更深一层的家庭层中。如果您需要从变量数组等生成 HBox 子级，那么您可能需要将每个子级放入 Box 中并使用 Repeater 或其他东西。一些更多细节将有助于获得更具体的答案。