如何在Flutter中实现类似FilterChip的下拉菜单效果？

原代码用DropdownButton的思路不符合需求：selectedItemBuilder是用来定义下拉列表内选中项的显示样式，而非顶部触发按钮的样式，且DropdownButton默认触发组件是按钮而非Chip，无法实现M3中点击Chip弹出选项列表的交互。

改用PopupMenuButton配合FilterChip可以完美实现目标效果，以下是适配Material 3的完整代码：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> list = ['flutter', 'material', 'dart', 'django'];
  String selectedValue = 'flutter';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PopupMenuButton<String>(
          // 自定义触发按钮为当前选中的FilterChip
          child: FilterChip(
            showCheckmark: true,
            selected: true,
            label: Text(selectedValue),
            onSelected: (_) {}, // 触发逻辑交给PopupMenuButton
          ),
          // 构建下拉选项列表
          itemBuilder: (context) => list.map((item) {
            return PopupMenuItem<String>(
              value: item,
              child: FilterChip(
                showCheckmark: true,
                selected: item == selectedValue,
                label: Text(item),
                onSelected: (_) {},
                tapEnabled: false, // 避免Chip点击与PopupMenuItem点击冲突
              ),
            );
          }).toList(),
          // 选中选项后更新状态
          onSelected: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          // 贴合M3菜单样式规范
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          elevation: 4,
        ),
      ),
    );
  }
}

关键细节说明 #

• 用PopupMenuButton作为容器，将当前选中的FilterChip设为触发按钮，符合M3的交互逻辑
• 下拉选项内嵌套FilterChip，保持样式一致性，同时关闭Chip自身的点击响应避免冲突
• 通过onSelected回调更新选中值，触发UI刷新
• 配置shape和elevation，贴合M3组件的圆角、阴影设计规范

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