能否将Vaadin单选按钮组样式改为按钮组并高亮选中项？

当然可以实现，下面提供两种常用方案：

方案一：基于RadioButtonGroup组件改造样式 #

这是最贴合Vaadin原生单选逻辑的方式，无需自己维护选中状态：

1. 初始化RadioButtonGroup #

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
// 设置选项内容
radioButtonGroup.setItems("选项A", "选项B", "选项C");
// 设置默认选中项
radioButtonGroup.setValue("选项A");
// 添加自定义样式类
radioButtonGroup.addClassName("button-style-radio-group");
// 将组件添加到布局
add(radioButtonGroup);

2. 添加CSS样式（全局样式文件或组件内联样式） #

/* 让单选按钮横向排列 */
.button-style-radio-group .vaadin-radio-button {
  display: inline-block;
  margin-right: 8px;
}

/* 把单选框容器改成按钮样式 */
.button-style-radio-group .vaadin-radio-button .vaadin-radio-button-container {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* 选中态的样式（背景+文字颜色） */
.button-style-radio-group .vaadin-radio-button[checked] .vaadin-radio-button-container {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

/* 隐藏原生的单选圆点 */
.button-style-radio-group .vaadin-radio-button .vaadin-radio-button-input {
  display: none;
}

方案二：用Button组件手动实现单选逻辑 #

如果需要更灵活的样式控制，可以直接用Button组，自己维护选中状态：

1. 创建按钮组并绑定逻辑 #

// 创建按钮列表
List<Button> optionButtons = Arrays.asList(
    new Button("选项1", e -> setActiveButton(e.getSource(), optionButtons)),
    new Button("选项2", e -> setActiveButton(e.getSource(), optionButtons)),
    new Button("选项3", e -> setActiveButton(e.getSource(), optionButtons))
);

// 默认选中第一个按钮
setActiveButton(optionButtons.get(0), optionButtons);

// 添加到横向布局
add(new HorizontalLayout(optionButtons.toArray(new Button[0])));

2. 实现选中状态切换方法 #

private void setActiveButton(Button activeBtn, List<Button> buttonList) {
  for (Button btn : buttonList) {
    if (btn.equals(activeBtn)) {
      btn.addClassName("active-radio-button");
    } else {
      btn.removeClassName("active-radio-button");
    }
  }
}

3. 添加选中态样式 #

.active-radio-button {
  background-color: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

/* 未选中按钮的基础样式 */
vaadin-button {
  margin-right: 8px;
  border: 1px solid #d1d5db;
}

两种方案都能实现「同一时间仅选中一个按钮」的单选功能，且选中按钮会显示不同颜色。你可以根据自己的样式需求选择合适的方案。

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