Flutter动态多选ChoiceChip列表点击不变色及onSelectionChanged空报错求助

问题根因&修复方案 #

1. 点击颜色无变化的原因和修复 #

• 色值格式错误：你写的Color(0xffff08222)共有9位数值，Flutter中ARGB格式色值要求0x后接8位十六进制数（2位透明度+2位红+2位绿+2位蓝），多余位数会导致颜色解析异常。
• 缺失选中态颜色配置：仅配置了backgroundColor（未选中背景色），没有设置selectedColor（选中背景色），选中后颜色无区分度。

2. onSelectionChanged抛空错误的原因和修复 #

没有对父组件传入的onSelectionChanged回调做空安全校验，当父组件未传递该回调时，直接调用就会抛出空指针异常，用Dart的安全调用符?.call即可解决。

3. 额外注意项 #

确认selectedOptions是当前State类的成员变量，不要定义在build方法内部，否则setState触发重建时变量会被重置，导致选中状态无法保存。 #

修正后完整代码 #

_buildChoiceList() {
  List<Widget> choices = [];
  options.forEach((item) {
    choices.add(Container(
      padding: const EdgeInsets.all(2.0),
      child: ChoiceChip(
        label: Text(item),
        selected: selectedOptions.contains(item),
        // 修正为8位合法色值，示例是浅灰色，可按需调整
        backgroundColor: const Color(0xfff0f2f2),
        // 新增选中态背景色，示例是主题蓝色，可按需调整
        selectedColor: Theme.of(context).primaryColor,
        // 可选：配置选中/未选中的文字颜色，增强区分度
        labelStyle: TextStyle(
          color: selectedOptions.contains(item) ? Colors.white : Colors.black87
        ),
        onSelected: (selected) {
          setState(() {
            selectedOptions.contains(item)
                ? selectedOptions.remove(item)
                : selectedOptions.add(item);
            // 安全调用回调，避免空指针
            widget.onSelectionChanged?.call(selectedOptions);
          });
        },
      ),
    ));
  });
  return choices;
}

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