Flutter中AlertDialog内嵌NumberPicker选择值后回退异常如何解决

问题根因 #

showDialog 生成的弹窗是独立于父组件的 Widget 树，默认没有状态更新能力。你现在调用的 setState 是父组件的状态更新方法，只能刷新父组件的页面，没法刷新弹窗的内容，所以你选了新值之后，弹窗还是显示旧的数值，看起来就像跳回去了。

解决方案 #

用 Flutter 自带的 StatefulBuilder 包裹弹窗的内容，拿到弹窗内部的状态更新能力，修改值的时候同时触发弹窗重绘即可，修正后代码如下：

void pickValue() {
  showDialog<int>(
      context: context,
      builder: (BuildContext context) {
        // StatefulBuilder 提供弹窗内部的状态更新能力
        return StatefulBuilder(
          builder: (context, setDialogState) {
            return AlertDialog(
              title: const Text("选择任务数量"),
              content: NumberPicker(
                selectedTextStyle: const TextStyle(color: Colors.red),
                value: currentValue,
                minValue: 1,
                maxValue: 10,
                onChanged: (value) {
                  // 先更新弹窗内部显示
                  setDialogState(() => currentValue = value);
                  // 如果需要实时同步父组件状态，保留这一行
                  setState(() => currentValue = value);
                },
              ),
              actions: [
                TextButton(
                  child: const Text("确定"),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                )
              ],
            );
          }
        );
      });
}

可选优化：如果不需要选中值实时同步到父组件页面，可以在弹窗内部声明一个临时变量存储选中值，点击确定按钮时再把临时变量赋值给父组件的currentValue，减少父组件不必要的重绘。

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