Vaadin 23.1实现响应式多列MultiSelectListBox的方法

该方案完全遵循Vaadin官方样式自定义规范，无CSS hack，不会破坏组件原有功能。

核心实现逻辑 #

Vaadin 23 版本的MultiSelectListBox官方暴露了内部列表的list-box样式part，属于公开可自定义的API，结合标准CSS Grid响应式布局即可实现自动列数切换，不需要额外嵌套布局容器。

步骤1：Java端给组件添加自定义类名 #

给目标组件添加专属样式类，避免样式全局污染：

// 初始化组件
MultiSelectListBox<String> optionList = new MultiSelectListBox<>();
// 填充20个选项的业务逻辑省略
// 添加自定义类名用于样式匹配
optionList.addClassName("responsive-column-list");
add(optionList);

步骤2：通过官方标准方式注入作用域样式 #

在视图类上通过@CssImport注解注入针对组件影子DOM的样式，themeFor参数指定样式作用于vaadin-multi-select-list-box组件内部，是Vaadin官方推荐的组件样式自定义方式：

@Route("your-view")
@CssImport(value = "./styles/responsive-multiselect.css", themeFor = "vaadin-multi-select-list-box")
public class YourView extends VerticalLayout {
  // 视图逻辑省略
}

步骤3：编写响应式样式 #

在项目frontend/styles/目录下新建responsive-multiselect.css文件，两种实现方式二选一即可。

方式1：无硬编码断点的自适应列数 #

不需要写媒体查询，根据容器宽度自动计算列数，宽度够放多少列就显示多少列，自动适配1/2/3列场景：

:host(.responsive-column-list) [part="list-box"] {
  display: grid;
  /* 单选项最小宽度180px，自动填充列 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-xs) var(--lumo-space-s);
}

/* 调整选项样式适配网格布局，保持和默认样式一致的间距 */
:host(.responsive-column-list) [part="list-box"] ::slotted(vaadin-item) {
  width: 100%;
  margin: 0;
}

方式2：固定断点切换1/2/3列 #

如果需要严格按照屏幕宽度固定切换列数，使用Vaadin内置的Lumo断点（官方公开的设计token，版本升级不会变动）编写媒体查询：

:host(.responsive-column-list) [part="list-box"] {
  display: grid;
  gap: var(--lumo-space-s);
  padding: var(--lumo-space-xs) var(--lumo-space-s);
  /* 小屏默认1列 */
  grid-template-columns: 1fr;
}

/* 屏幕宽度≥600px（Lumo M断点）显示2列 */
@media (min-width: 600px) {
  :host(.responsive-column-list) [part="list-box"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 屏幕宽度≥1024px（Lumo L断点）显示3列 */
@media (min-width: 1024px) {
  :host(.responsive-column-list) [part="list-box"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

:host(.responsive-column-list) [part="list-box"] ::slotted(vaadin-item) {
  width: 100%;
  margin: 0;
}

合规性说明：上述样式仅修改官方公开暴露的list-box part，没有操作组件内部未公开的私有DOM节点，不属于CSS hack，版本升级兼容性有保障，且不会破坏组件原有的键盘导航、选中状态、无障碍访问等内置能力。

内容的提问来源于stack exchange，提问作者user3877158