formLayout 表单布局

在线示例

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

  • XML 元素：formLayout

  • Java 类：FormLayout

基本用法

默认情况下，布局内部的组件分为两列。

<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

响应式列数

responsiveSteps 元素可以根据可用空间的大小确定显示的列数。

<formLayout>
    <responsiveSteps>
        <responsiveStep minWidth="0" columns="1"/>
        <responsiveStep minWidth="30em" columns="2"/>
        <responsiveStep minWidth="40em" columns="3"/>
        <responsiveStep minWidth="50em" columns="4"/>
        <responsiveStep minWidth="60em" columns="5"/>
    </responsiveSteps>
    <textField placeholder="City" label="Where from?"/>
    <textField placeholder="City" label="Where to?"/>
    <datePicker label="Depart"/>
    <datePicker label="Return"/>
    <button text="Search tickets"/>
</formLayout>

当宽度足够时，上面的布局会自动调整以使用全部的 5 个列：

form layout columns

标签位置

此布局可以可以支持在内部组件的旁边放置标签。将内部组件放置于 formItem 元素内，设置其标签，然后配置 labelsPosition 属性指定标签位置：

formItem 内只能放入单一组件。 
<formLayout labelsPosition="ASIDE">
    <formItem label="Where from?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Where to?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Depart">
        <datePicker/>
    </formItem>
    <formItem label="Return">
        <datePicker/>
    </formItem>
    <formItem>
        <button text="Search tickets"/>
    </formItem>
</formLayout>
form layout labels aside

响应式标签位置

在侧面显示标签的布局比在默认在组件顶部显示的布局需要更多的空间。与列排布类似，可以调整标签位置以适应可用空间。此时，不要将 labelsPosition 属性配置到布局中，而是在每个 responsiveSteps 元素配置：

<formLayout>
    <responsiveSteps>
        <responsiveStep minWidth="0" columns="1" labelsPosition="TOP"/>
        <responsiveStep minWidth="30em" columns="1" labelsPosition="ASIDE"/>
        <responsiveStep minWidth="40em" columns="2" labelsPosition="TOP"/>
        <responsiveStep minWidth="50em" columns="2" labelsPosition="ASIDE"/>
    </responsiveSteps>
    <formItem label="Where from?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Where to?">
        <textField placeholder="City"/>
    </formItem>
    <formItem label="Depart">
        <datePicker/>
    </formItem>
    <formItem label="Return">
        <datePicker/>
    </formItem>
    <formItem colspan="2">
        <button text="Search tickets"/>
    </formItem>
</formLayout>

布局宽度改变时，列的数目和标签位置都会随之改变：

form layout responsive labels position

列展拓

用 colspan 属性控制内部组件可以跨越的列数目。

例如，可以配置一个按钮始终占据 2 列的宽度：

<formLayout id="abc">
    <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 - css - dataContainer - enabled - height - labelsPosition - maxHeight - maxWidth - minHeight - minWidth - visible - width

labelsPosition

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

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

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

事件和处理器

AttachEvent - ClickEvent - DetachEvent

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

ClickEvent

点击组件时发送 com.vaadin.flow.component.ClickEvent 事件。处理方法必须指定以下三种点击之一来处理具体的点击事件。

  • click - 当组件被点击时发送。

  • singleClick - 当点击过了一段时间后发送，以确保不是双击。

  • doubleClick - 当组件被双击时发送。

XML 内部元素

formItem - responsiveSteps

参考

Vaadin 文档