Flutter中AlertDialog内Radio输入UI状态不同步问题

问题根源 #

你当前的代码中，type变量定义在StatefulBuilder的外部作用域中，虽然通过setState更新了变量值，但StatefulBuilder的重建逻辑无法正确捕获到该变量的变化，导致RadioListTile的选中状态无法同步到UI。此外，现有的保存逻辑也没有区分选中的类型（Pages/Minutes），无法正确保存对应的目标值。

解决方案一：使用自定义StatefulWidget封装弹窗内容 #

将弹窗内容提取为独立的StatefulWidget，把type作为组件的状态变量，确保setState能正确触发UI重建：

1. 创建弹窗内容组件

class _TargetDialogContent extends StatefulWidget {
  final TextEditingController targetController;
  const _TargetDialogContent({required this.targetController});

  @override
  State<_TargetDialogContent> createState() => _TargetDialogContentState();
}

class _TargetDialogContentState extends State<_TargetDialogContent> {
  int? type = 1; // 将type作为组件状态变量

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0)),
      insetPadding: const EdgeInsets.all(16),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Expanded(
                child: RadioListTile(
                  title: const Text('Pages'),
                  value: 1,
                  groupValue: type,
                  onChanged: (value) => setState(() {
                    type = value;
                    print('Value is $value, type is $type');
                  }),
                ),
              ),
              Expanded(
                child: RadioListTile(
                  title: const Text('Minutes'),
                  value: 2,
                  groupValue: type,
                  onChanged: (value) => setState(() {
                    type = value;
                    print('Value is $value, type is $type');
                  }),
                ),
              )
            ],
          ),
          TextFormField(
            controller: widget.targetController,
            keyboardType: TextInputType.number,
            decoration:
                const InputDecoration(hintText: "Enter your goal"),
          ),
          const SizedBox(height: 10),
          Align(
            alignment: Alignment.centerRight,
            child: TextButton(
              onPressed: () {
                // 返回选中的类型和输入值
                Navigator.of(context).pop((type, widget.targetController.text));
              },
              child: const Text('Save'),
            ),
          ),
        ],
      ),
    );
  }
}

2. 修改showSetTargetDialog函数

Future<(int? type, String value)?> showSetTargetDialog(
    BuildContext context, TextEditingController targetController) async {
  return await showDialog(
    context: context,
    builder: (context) {
      return _TargetDialogContent(targetController: targetController);
    },
  );
}

3. 修复调用处的保存逻辑

在OnboardingSetTargetScreen的CustomButton点击回调中，根据选中的类型保存目标值：

onPressed: () async {
  final result = await showSetTargetDialog(context, _targetController);
  if (result != null && result.$2.isNotEmpty) {
    final selectedType = result.$1;
    final targetValue = int.parse(result.$2);
    if (selectedType == 1) {
      ref.read(onboardingControllerProvider.notifier).setPages(targetValue);
    } else if (selectedType == 2) {
      ref.read(onboardingControllerProvider.notifier).setMinutes(targetValue);
    }
    // 清空输入框
    _targetController.clear();
  }
},

解决方案二：使用ValueNotifier配合ValueListenableBuilder #

如果不想创建新的StatefulWidget，可以用ValueNotifier维护状态，通过ValueListenableBuilder监听状态变化：

Future<(int? type, String value)?> showSetTargetDialog(
    BuildContext context, TextEditingController targetController) async {
  final typeNotifier = ValueNotifier<int?>(1);
  return await showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)),
        insetPadding: const EdgeInsets.all(16),
        contentPadding:
            const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ValueListenableBuilder<int?>(
              valueListenable: typeNotifier,
              builder: (context, type, _) => Row(
                children: [
                  Expanded(
                    child: RadioListTile(
                      title: const Text('Pages'),
                      value: 1,
                      groupValue: type,
                      onChanged: (value) => typeNotifier.value = value,
                    ),
                  ),
                  Expanded(
                    child: RadioListTile(
                      title: const Text('Minutes'),
                      value: 2,
                      groupValue: type,
                      onChanged: (value) => typeNotifier.value = value,
                    ),
                  )
                ],
              ),
            ),
            TextFormField(
              controller: targetController,
              keyboardType: TextInputType.number,
              decoration:
                  const InputDecoration(hintText: "Enter your goal"),
            ),
            const SizedBox(height: 10),
            Align(
              alignment: Alignment.centerRight,
              child: TextButton(
                onPressed: () {
                  Navigator.of(context).pop((typeNotifier.value, targetController.text));
                },
                child: const Text('Save'),
              ),
            ),
          ],
        ),
      );
    },
  );
}

调用处的保存逻辑和方案一相同。

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