hbox 水平盒子

在线示例

hbox 内部组件在一行水平排列。

XML 元素

hbox

Java 类

HorizontalLayout

XML 属性

id - alignItems - alignSelf - boxSizing - classNames - clickShortcut - colspan - css - enabled - expand - height - justifyContent - margin - maxHeight - maxWidth - minHeight - minWidth - padding - spacing - themeNames - visible - width

事件和处理器

AttachEvent - ClickEvent - DetachEvent

XML 内部元素

endSlot - middleSlot - startSlot

基本用法

在同一行排列 3 个组件的示例：

<hbox id="hbox">
    <textField placeholder="TextField"/>
    <button text="OK"/>
    <button text="Cancel"/>
</hbox>
hbox basic

水平对齐

内部组件的水平对齐可以通过两种方式实现：对齐单个组件或容器对齐内容。

对齐单个组件

hbox 中可以将子组件添加至内部不同的区域或插槽（slot）。子组件然后可以基于布局容器的开始、中间或末尾进行对齐。

hbox slots

子组件可以用下面的方式放置于不同的对齐插槽内：

  • XML 配置

    <hbox id="horizontalBox" width="100%" height="100%">
    <startSlot>
        <textField label="Start component"/>
    </startSlot>
    <middleSlot>
        <textField label="Middle component"/>
    </middleSlot>
    <endSlot>
        <textField label="End component"/>
    </endSlot>
</hbox>

    如需通过 Jmix Studio 添加插槽，在 XML 或 Jmix UI 层级结构中选择 hbox，然后点击组件属性面板的 Add 按钮。

  • 编程式配置

    @ViewComponent
private HorizontalLayout horizonsBox;

@Autowired
private UiComponents uiComponents;

@Subscribe
public void onInit(final InitEvent event) {
    horizonsBox.addToStart(createTextField("Start component"));
    horizonsBox.addToMiddle(createTextField("Middle component"));
    horizonsBox.addToEnd(createTextField("End component"));
}

private TypedTextField<String> createTextField(String label) {
    TypedTextField<String> textField = uiComponents.create(TypedTextField.class);
    textField.setLabel(label);
    return textField;
}

容器对齐

容器对齐模式可以定义内部元素如何在可用的水平空间中排布。支持：

  • START（默认）

    内部元素对齐在左侧（从左到右的地区语言）或右侧（从右到左的地区语言）。

  • CENTER

    内部所有元素放置于布局容器的中间。

  • END

    内部元素对齐在右侧（从左到右的地区语言）或左侧（从右到左的地区语言）。

  • BETWEEN

    在内部元素之间均匀分配可用空间。在第一个元素之前或最后一个元素之后没有额外的空间。

  • AROUND

    在内部元素之间均匀分配可用空间。在第一个元素之前或最后一个元素之后的额外的空间是元素之间空间的一半。

  • EVENLY

    在内部元素之间均匀分配可用空间。在第一个元素之前或最后一个元素之后的额外的空间跟元素之间空间一样。

使用 justifyContent 属性设置布局的内容对齐。

XML 属性

在 Jmix 中，所有组件都有一些作用一致的 通用属性。

下面是 hbox 的特殊属性：

名称

描述

默认值

boxSizing

设置内部元素的宽高如何计算。支持值：UNDEFINED、CONTENT_BOX、BORDER_BOX。参阅 MDN。

-

expand

指定布局容器内的一个组件，该组件可以使用所有的剩余空间。在 hbox 中，这个属性会设置组件的宽度为 100%。

-

justifyContent

定义浏览器如何在子组件之间分配空间。参阅 内容对齐。

START

margin

定义外部边界与容器内容之间的边距。支持值：true、false。参阅 MDN。

false

padding

一次性设置子元素的四个内边距。支持值：true、false。参阅 MDN。

false

spacing

设置子元素之间的空间。支持值：true、false。

false

事件和处理器

AttachEvent - ClickEvent - DetachEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

ClickEvent

当用户点击布局时发送 com.vaadin.flow.component.ClickEvent 事件。

参考

Vaadin 文档