Flutter中如何更改展开的DropdownMenu选中项的背景颜色？

根据不同技术栈，提供以下具体实现方案：

1. Flutter 环境 #

方法一：动态设置选中项背景 #

通过判断选中状态，给DropdownMenuItem的子容器设置对应背景色：

DropdownMenuItem(
  value: '选项1',
  selected: _selectedValue == '选项1',
  child: Container(
    color: _selectedValue == '选项1' ? Colors.blue[100] : Colors.transparent,
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    child: Text('选项1'),
  ),
)

方法二：通过主题全局配置 #

修改DropdownMenuThemeData的selectedMenuItemBuilder来统一设置选中项样式：

Theme(
  data: Theme.of(context).copyWith(
    dropdownMenuTheme: DropdownMenuThemeData(
      selectedMenuItemBuilder: (context) {
        return Container(
          color: Colors.green[200],
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        );
      },
    ),
  ),
  child: DropdownMenu(
    initialSelection: _selectedValue,
    dropdownMenuEntries: [
      DropdownMenuEntry(value: '选项1', label: '选项1'),
      DropdownMenuEntry(value: '选项2', label: '选项2'),
    ],
    onSelected: (value) => setState(() => _selectedValue = value),
  ),
)

2. Web前端场景 #

原生HTML <select> #

利用CSS伪类:checked设置选中选项的背景：

select option:checked {
  background-color: #a5d6a7;
  color: #ffffff;
}

Bootstrap Dropdown #

覆盖默认选中项的类样式：

.dropdown-menu .active {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

Element UI（Vue） #

自定义样式覆盖框架默认选中类：

.el-dropdown-menu__item--selected {
  background-color: #81d4fa !important;
}

3. Android Jetpack Compose #

通过MenuItemDefaults.colors配置选中项的容器颜色：

DropdownMenuItem(
    text = { Text("选项1") },
    onClick = { /* 点击逻辑 */ },
    colors = MenuItemDefaults.colors(
        selectedContainerColor = Color(0xFFE8F5E9),
        selectedTextColor = Color(0xFF2E7D32)
    ),
    selected = _selectedValue == "选项1"
)

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