formLayout 表单布局

在线示例

formLayout 是一个响应式布局，内部组件按列排布。列的数量根据布局的宽度变化。

  • XML 元素：formLayout

  • Java 类：FormLayout

基本用法

默认情况下，formLayout 将内部组件分为两列。

<formLayout id="formLayout">
    <textField placeholder="City" label="Where from?"/>
    <textField placeholder="City" label="Where to?"/>
    <datePicker label="Depart"/>
    <datePicker label="Return"/>
    <button text="Search tickets"/>
</formLayout>
form layout basic 1

当布局容器的宽度变小时，会自动调整为一列。

form layout basic 2

Columns

定义根据布局宽度展示的列数。

@ViewComponent
private FormLayout formLayout;

@Subscribe
public void onInit(final InitEvent event) {
    formLayout.setResponsiveSteps(
            new FormLayout.ResponsiveStep("0", 1),
            new FormLayout.ResponsiveStep("320px", 2),
            new FormLayout.ResponsiveStep("460px", 3),
            new FormLayout.ResponsiveStep("600px", 4),
            new FormLayout.ResponsiveStep("740px", 5));
}
form layout columns

Column Span

formLayout 遵循内部组件的属性设置。使用 colspan 属性设置内部组件占据的列数量。

<formLayout>
    <textField placeholder="City" label="Where from?"/>
    <textField placeholder="City" label="Where to?"/>
    <datePicker label="Depart"/>
    <datePicker label="Return"/>
    <button text="Search tickets" colspan="2"/>
</formLayout>
form layout

XML 属性

id - alignSelf - classNames - colspan - dataContainer - enabled - height - labelsPosition - maxHeight - maxWidth - minHeight - minWidth - visible - width -

labelsPosition

设置内部组件标签的位置。

  • ASIDE — 标签放在组件的旁边。

  • TOP — 标签放在组件的上方。

如果标签的位置是位于左侧，则每个控件需要放在 formItem 元素内，示例：

<formLayout labelsPosition="ASIDE">
    <formItem>
        <textField placeholder="City" label="Where from?"/>
    </formItem>
    <formItem>
        <textField placeholder="City" label="Where to?"/>
    </formItem>
    <formItem>
        <datePicker label="Depart"/>
    </formItem>
    <formItem>
        <datePicker label="Return"/>
    </formItem>
    <formItem>
        <button text="Search tickets" colspan="2"/>
    </formItem>
</formLayout>

事件和处理器

AttachEvent - ClickEvent DetachEvent

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

ClickEvent

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

参考

Vaadin 文档