本教程详细介绍了如何在 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 作用域内，这样它才能正确地覆盖或应用样式。
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
请在您的 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 中根据条件动态改变行背景色，并确保样式能够正确、稳定地应用。
以上就是在 Vaadin Grid 中根据条件动态改变行背景色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1106627.html
微信扫一扫 
支付宝扫一扫 
