Flutter理发预订App中ChoiceChip无法选中、返回null问题求助

1. 先盯紧状态更新的正确姿势 #

如果用的是setState，修改服务选中状态时必须把操作包在setState回调里，而且不能直接修改原列表的元素，得创建新列表替换旧的——Flutter只会监听对象引用变化，直接改元素属性不会触发刷新。

示例代码：

void toggleService(ServiceModel service) {
  setState(() {
    // 复制原列表生成新列表
    final updatedList = [..._serviceList];
    final targetIndex = updatedList.indexWhere((s) => s.id == service.id);
    if (targetIndex != -1) {
      // 用copyWith生成新的服务对象，替换旧元素
      updatedList[targetIndex] = updatedList[targetIndex].copyWith(
        isSelected: !updatedList[targetIndex].isSelected
      );
    }
    _serviceList = updatedList;
  });
}

如果用Provider/Riverpod这类状态管理库，同样要保证状态对象是不可变的，修改时必须生成新对象，不能直接改原对象的属性。

2. 检查ServiceModel的实现细节 #

• 给isSelected字段加默认值false，别让它默认是null——这就是你说的isSelected方法返回null的根源。
• 必须实现copyWith方法，用来生成新的服务对象，保证状态更新的不可变性。

示例ServiceModel：

class ServiceModel {
  final String id;
  final String name;
  final bool isSelected;

  ServiceModel({
    required this.id,
    required this.name,
    // 给isSelected设默认值，避免null
    this.isSelected = false,
  });

  // 必须有copyWith方法，用于生成新对象
  ServiceModel copyWith({
    String? id,
    String? name,
    bool? isSelected,
  }) {
    return ServiceModel(
      id: id ?? this.id,
      name: name ?? this.name,
      isSelected: isSelected ?? this.isSelected,
    );
  }
}

3. 修正ChoiceChip的绑定逻辑 #

别用自定义的isSelected方法，直接把isSelected参数绑定到服务对象的isSelected字段，这样状态更新时Chip才能同步感知：

错误写法：

ChoiceChip(
  label: Text(service.name),
  isSelected: _checkSelected(service), // 这类方法容易返回null
  onSelected: (val) => toggleService(service),
)

正确写法：

ChoiceChip(
  label: Text(service.name),
  isSelected: service.isSelected, // 直接绑定字段
  onSelected: (val) => toggleService(service),
)

4. 确认FINISH按钮的启用逻辑 #

按钮的onPressed要根据选中服务的数量判断，确保逻辑正确：

ElevatedButton(
  onPressed: _serviceList.any((s) => s.isSelected) ? _finishBooking : null,
  child: const Text('FINISH'),
)

5. 验证Wrap的数据源 #

确保Wrap的子项是基于当前状态的服务列表构建的，别用初始的静态列表：

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: _serviceList.map((service) {
    return ChoiceChip(
      label: Text(service.name),
      isSelected: service.isSelected,
      onSelected: (val) => toggleService(service),
    );
  }).toList(),
)

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