Flutter自定义Radio组件跨类调用后值不更新问题求助

我看了你的代码，问题核心出在单选组的状态管理逻辑混乱上，下面一步步帮你梳理并修正：

问题根源 #

1. 你把单选组的选中状态_selection放在父组件，但传给子组件ChooseTime的selection是固定值（比如1、2），导致子组件无法感知父组件的状态变化；
2. 子组件的Radio用了自己内部的_selection作为groupValue，但这个值没有和父组件的状态同步，点击后UI自然不会更新；
3. 子组件中Text的颜色判断也依赖了错误的状态值，没法正确反馈选中状态。

修正后的完整代码 #

1. 重构ChooseTime组件

去掉子组件内部的独立状态，让它完全依赖父组件传递的状态值，这样所有单选按钮才能共享同一个选中状态：

class ChooseTime extends StatelessWidget {
  final int value;
  final int currentSelection; // 明确表示当前全局选中的值
  final String time;
  final Function(int) onSelect; // 明确回调参数类型

  const ChooseTime({
    Key? key,
    required this.value,
    required this.currentSelection,
    required this.time,
    required this.onSelect,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Radio(
          focusColor: Colors.white,
          activeColor: Colors.white,
          groupValue: currentSelection, // 绑定父组件的全局选中状态
          onChanged: (int? newValue) {
            if (newValue != null) {
              onSelect(newValue); // 触发父组件更新状态
            }
          },
          value: value,
        ),
        Text(
          time,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: currentSelection == value ? Colors.white : Colors.deepOrangeAccent, // 直接用当前值判断是否选中
          ),
        ),
      ],
    );
  }
}

2. 修正父组件的调用逻辑

确保每个ChooseTime都拿到父组件的动态选中状态，这样父组件状态更新时，所有子组件都会同步UI：

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

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  int _selectedTime = 1; // 默认选中第一个时间段

  void handleTimeSelect(int selectedValue) {
    setState(() {
      _selectedTime = selectedValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        ChooseTime(
          currentSelection: _selectedTime, // 传递父组件的动态状态
          value: 1,
          time: "09:00-11:00",
          onSelect: handleTimeSelect,
        ),
        ChooseTime(
          currentSelection: _selectedTime, // 每个子组件都共享同一个状态
          value: 2,
          time: "11:00-14:00",
          onSelect: handleTimeSelect,
        ),
        // 剩下4个ChooseTime组件只需要修改value和time参数即可
        // ChooseTime(...)
      ],
    );
  }
}

关键修改说明 #

• 子组件改为StatelessWidget：因为它不需要维护内部状态，所有状态都由父组件统一管理，符合单一职责原则；
• 统一groupValue：所有单选按钮的groupValue都指向父组件的_selectedTime，这样才能形成真正的单选组（同一时间只能选中一个）；
• 动态传递状态：父组件传给子组件的currentSelection是实时更新的_selectedTime，而不是固定值，确保状态变化时UI同步；
• 明确回调类型：给回调函数加上Function(int)类型约束，避免潜在的类型错误。

这样修改后，点击单选按钮时，父组件的状态会更新，所有子组件都会自动重建并展示正确的选中状态。

内容的提问来源于stack exchange，提问作者Muhammad Amin Jalolov