在 Vaadin Grid 中根据条件动态改变行背景色

本教程详细介绍了如何在 vaadin grid 中，根据特定条件动态设置行的背景颜色。文章解释了为何直接使用 `lumoutility` 类可能无法生效，并提供了一种基于自定义 css 的可靠解决方案，强调了在主题的 `components/vaadin-grid.css` 文件中定义样式的重要性，以确保正确的 css 作用域和样式应用。

理解 Vaadin Grid 行样式问题

在 Vaadin 应用开发中，我们经常需要根据数据行的特定状态来动态改变其视觉表现，例如当某个条件满足时，改变 Grid 行的背景颜色。Vaadin 提供了 grid.setClassNameGenerator(row -> ...) 方法来为符合条件的行动态添加 CSS 类。然而，直接尝试使用 Vaadin Lumo 主题提供的 LumoUtility 类（例如 LumoUtility.Background.CONTRAST）来设置行背景色时，可能会发现样式并未生效，即使这些工具类在其他组件中工作正常。

这背后的主要原因是 CSS 的作用域问题。Vaadin Grid 是一个复杂的 Web 组件，其内部结构被 Shadow DOM 封装。LumoUtility 类通常是为全局或组件顶层元素设计的，它们可能无法穿透 Grid 的 Shadow DOM 边界，从而无法直接作用于 Grid 内部的行元素。

正确的解决方案：利用自定义 CSS 类

要解决这个问题，最可靠的方法是定义一个自定义的 CSS 类，并在 Vaadin Grid 的特定作用域内应用它。这样可以确保样式能够正确地作用于 Grid 的行元素。

步骤一：在 Vaadin Grid 中设置条件类名

首先，使用 setClassNameGenerator 方法为满足条件的行添加一个自定义的 CSS 类名。例如，当 row.getRemoved() 返回 true 时，为该行添加 grid-row-removed 类。

grid.setClassNameGenerator(row -> row.getRemoved() ? "grid-row-removed" : "");

这里的 grid-row-removed 是一个您自定义的 CSS 类名，您可以根据实际需求命名。

步骤二：定义自定义 CSS 样式

接下来，您需要定义 grid-row-removed 类的样式。关键在于，这个 CSS 定义必须放置在 Vaadin Grid 组件的 CSS 作用域内，这样它才能正确地覆盖或应用样式。

凌动AI

免费上传PDF，支持真AI总结、多轮聊天、语音提问、多文件管理、思维导图导出、分享聊天记录链接。

下载

请在您的 Vaadin 主题目录下的 components 文件夹中创建一个名为 vaadin-grid.css 的文件。其路径通常是 /frontend/themes//components/vaadin-grid.css。如果文件已存在，则直接添加样式定义。

/* /frontend/themes//components/vaadin-grid.css */

.grid-row-removed {
    background-color: var(--lumo-contrast); /* 使用 Lumo 主题变量保持一致性 */
}

在这个 CSS 定义中，我们为 grid-row-removed 类设置了 background-color。为了保持与 Vaadin Lumo 主题的视觉一致性，我们推荐使用 Lumo 主题的 CSS 变量，例如 var(--lumo-contrast)。这会使用 Lumo 主题中定义的对比色作为背景，确保您的应用风格统一。

CSS 作用域与 Lumo 主题变量

将自定义 CSS 规则放置在 /frontend/themes//components/vaadin-grid.css 文件中至关重要。Vaadin 会自动识别并加载这个文件，并将其 CSS 规则注入到 vaadin-grid Web 组件的 Shadow DOM 作用域内。这意味着这些规则将具有足够的特异性，能够影响到 Grid 内部的行元素，从而解决直接使用 LumoUtility 类时遇到的作用域问题。

使用 var(--lumo-contrast) 等 Lumo 主题变量的另一个好处是，当您更改应用的主题（例如从亮色模式切换到暗色模式）时，这些颜色也会自动适应，无需手动修改 CSS 规则。

注意事项与最佳实践

• 文件路径准确性： 务必确保 vaadin-grid.css 文件位于正确的路径下 (/frontend/themes//components/)，否则样式将不会被加载。
• 缓存清除： 在修改 CSS 文件后，有时浏览器或 Vaadin 的开发服务器可能存在缓存。如果样式没有立即生效，尝试清除浏览器缓存或重启开发服务器。
• Lumo 变量的利用： 尽可能利用 Lumo 主题提供的 CSS 变量（例如 --lumo-primary-color, --lumo-error-color, --lumo-success-color 等）来定义您的自定义样式，以确保应用整体风格的统一性和可维护性。
• 避免过度复杂化： 尽管可以编写复杂的 CSS 选择器，但在 Grid 行样式场景中，一个简单的类名通常就足够了，保持 CSS 规则的简洁性有助于提高可读性和维护性。

通过遵循上述步骤，您将能够有效地在 Vaadin Grid 中根据条件动态改变行背景色，并确保样式能够正确、稳定地应用。