Flutter ChoiceChip单选失效：选中新选项旧选项不取消如何解决？

问题原因 #

你当前每个ChipWidget都维护了独立的选中状态，组件之间没有状态同步，所以点击新的Chip不会更新其他Chip的选中状态，无法实现单选效果。单选的全局选中状态需要提升到父组件统一维护，所有子Chip的选中状态都由父组件的全局状态控制。

具体修改步骤 #

1. 重构ChipWidget组件 #

移除内部维护的选中状态，改为接收父组件传入的选中状态和选中回调：

class ChipWidget extends StatelessWidget {
  const ChipWidget({
    Key? key,
    required this.label,
    required this.listIndex,
    required this.isSelected,
    required this.onSelected,
  }) : super(key: key);

  final String label;
  final int listIndex;
  final bool isSelected;
  final ValueChanged<int> onSelected;

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      label: Text(label),
      selected: isSelected,
      selectedColor: Colors.red,
      onSelected: (value) {
        if (value) {
          onSelected(listIndex);
        } else {
          // 支持取消选中时传-1，不需要取消选中可删除该分支
          onSelected(-1);
        }
      },
    );
  }
}

2. 修改HomeScreen组件 #

新增全局选中索引状态，将状态和回调传递给每个ChipWidget：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> _chipItems = [];
  // 全局维护当前选中的Chip索引，null表示未选中任何
  int? _selectedChipIndex;

  @override
  void initState() {
    super.initState();
    _chipItems = ["Terleme", "Aşırı Düşünme", "Baş Ağrısı", "Mide Bulantısı"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Wrap(
              spacing: 8, // 可选：增加Chip之间的间距
              children: _chipItems
                  .asMap()
                  .map((key, value) => MapEntry(
                      key,
                      ChipWidget(
                        label: value,
                        listIndex: key,
                        isSelected: _selectedChipIndex == key,
                        onSelected: (index) {
                          setState(() {
                            _selectedChipIndex = index == -1 ? null : index;
                          });
                        },
                      )))
                  .values
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

修改完成后所有Chip的选中状态都由父组件的_selectedChipIndex统一控制，点击任意Chip都会更新全局状态触发所有Chip重绘，即可实现同一时间仅选中一个的单选效果。

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