如何在 Vaadin Flow 中设置 FormLayout 的标签宽度？答案

【问题标题】：How set the label width of a FormLayout in Vaadin Flow?如何在 Vaadin Flow 中设置 FormLayout 的标签宽度？
【发布时间】：2019-06-21 22:22:40
【问题描述】：

将 Vaadin 12 与 FormLayout 和输入字段左侧的标签一起使用。

我想设置标签列的宽度。如何使用 Java API 实现这一点？

【问题讨论】：

标签： vaadin-flow

【解决方案1】：

要设置个人FormItem 标签宽度和/或更动态的方法，请参阅@TatuLund 的答案和他对此解决方案的评论。

要在整个Form 中设置标签，请使用@HtmlImport("frontend://styles/shared-styles.html")

在shared-styles.html 中添加这个片段：

<dom-module theme-for="vaadin-form-item" id="custom-form-item">
    <template>
        <style>     
            :host {
                --vaadin-form-item-label-width: 15em;  
            }
        </style>
    </template>
</dom-module>

Gotcha（对我而言）：theme-for="vaadin-form-item" 而不是 theme-for="vaadin-form-layout"

Vaadin Flow v14+ 更新（使用 v14.1.3 测试）

在PROJECT_DIR/frontend/styles/ 中创建form-item.css 内容：

   :host {
        --vaadin-form-item-label-width: 15em;
    }

在顶级路由类（在我的例子中是主布局类）中添加注释：

@CssImport(value = "./styles/form-item.css", themeFor = "vaadin-form-item")

另见https://vaadin.com/docs/v14/flow/theme/migrate-p2-to-p3.html 和https://stackoverflow.com/a/57553974/868941。

【讨论】：

是的，这是实现这一点的一种方法和更有效的方法。另一个版本可能是扩展 FormItem 并在构造函数中设置属性。如果你想动态改变宽度，这个版本更方便，而你的版本更静态。

【解决方案2】：

如果您使用FormItem.addToLabel(..) 方法设置标签内容，则其宽度在FormItem 中由自定义属性--vaadin-form-item-label-width 控制（查看更多：https://vaadin.com/components/vaadin-form-layout/html-api/elements/Vaadin.FormItemElement）默认值为8em。所以你可以设置更宽，例如与：

formItem.getElement().getStyle().set("--vaadin-form-item-label-width", "10em");

不能直接创建FormItem的实例，但是在向FormLayout添加组件时会返回：

FormItem formItem = formlayout.addFormItem(component, "label text");

【讨论】：

谢谢。这正如您在@FormItem 级别所解释的那样工作。但我想为FormLayout 设置一次（和/或为整个应用程序全局设置）。这可能吗？