Flutter中CupertinoPicker在AlertDialog内值不更新问题排查

尝试在AlertDialog组件中使用CupertinoPicker，但选中的值无法更新。相同代码在非AlertDialog的普通Scaffold页面中可正常运行，这是怎么回事？

触发AlertDialog的按钮代码：

ElevatedButton(
 onPressed: () {
  showDialog(
    context: context, 
    builder: (context) => AlertDialog(
      content: Builder(builder: (context) {
        return SizedBox(
          child: Column(
            children: [
              // ... 其他子组件
            ]
          )
        );
      })
    )
  );
 }
)

其中CupertinoPicker相关代码如下：
组件类中定义：int selectedValue = 0;

CupertinoButton.filled(
  child: Text('$selectedValue'),
  onPressed: () => showCupertinoModalPopup(
    context: context,
    builder: (_) => SizedBox(
      width: screenWidth *0.3,
      height: screenHeight *0.25,
      child: CupertinoPicker(
        backgroundColor: Colors.white,
        itemExtent:30,
        scrollController: FixedExtentScrollController(initialItem: 1),
        children: const [
          Text('0'),Text('1'),Text('2'),Text('3'),
          Text('4'),Text('5'),Text('6'),Text('7'),
        ],
        onSelectedItemChanged:(int value) {
          setState(() {
            selectedValue = value;
          });
        },
      ),
    ),
  ),
),

此时Text('$selectedValue')显示的值不会变化，但将相同代码放在新的Scaffold页面中却能正常工作。

核心原因 #

AlertDialog是通过showDialog弹出的独立弹窗，它的上下文（context）和原页面的上下文属于不同的Widget树。当你在CupertinoPicker的onSelectedItemChanged中调用setState时，这个setState只会触发原页面的状态刷新，但AlertDialog作为独立的Widget分支，无法感知到原页面的状态变化，因此不会重新构建，导致显示的selectedValue始终停留在初始值。

而在普通Scaffold页面中，CupertinoPicker和显示selectedValue的Text处于同一个Widget树，setState会触发整个页面的重建，所以值能正常更新。

解决办法 #

方法1：将弹窗封装为独立的StatefulWidget #

把AlertDialog内的内容（包括CupertinoButton和CupertinoPicker）抽成单独的StatefulWidget，让弹窗内部独立管理状态，调用自身的setState就能刷新弹窗内的UI。

示例代码：

class MyPickerDialog extends StatefulWidget {
  const MyPickerDialog({super.key});

  @override
  State<MyPickerDialog> createState() => _MyPickerDialogState();
}

class _MyPickerDialogState extends State<MyPickerDialog> {
  int selectedValue = 0;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: SizedBox(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CupertinoButton.filled(
              child: Text('$selectedValue'),
              onPressed: () => showCupertinoModalPopup(
                context: context,
                builder: (_) => SizedBox(
                  width: MediaQuery.of(context).size.width *0.3,
                  height: MediaQuery.of(context).size.height *0.25,
                  child: CupertinoPicker(
                    backgroundColor: Colors.white,
                    itemExtent:30,
                    scrollController: FixedExtentScrollController(initialItem: selectedValue),
                    children: const [
                      Text('0'),Text('1'),Text('2'),Text('3'),
                      Text('4'),Text('5'),Text('6'),Text('7'),
                    ],
                    onSelectedItemChanged:(int value) {
                      setState(() {
                        selectedValue = value;
                      });
                      Navigator.pop(context); // 选择后关闭Picker弹窗
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

调用弹窗：

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) => const MyPickerDialog(),
    );
  },
)

方法2：用StatefulBuilder包裹弹窗内容 #

如果不想拆分组件，可以使用StatefulBuilder为弹窗内部提供局部状态更新能力，它会创建一个独立的局部State，调用它提供的setState就能刷新弹窗内的UI。

示例代码：

ElevatedButton(
  onPressed: () {
    int selectedValue = 0; // 将状态移到弹窗内部
    showDialog(
      context: context, 
      builder: (context) => AlertDialog(
        content: StatefulBuilder(
          builder: (context, setState) { // 这里的setState是局部的，仅作用于弹窗内部
            return SizedBox(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  CupertinoButton.filled(
                    child: Text('$selectedValue'),
                    onPressed: () => showCupertinoModalPopup(
                      context: context,
                      builder: (_) => SizedBox(
                        width: MediaQuery.of(context).size.width *0.3,
                        height: MediaQuery.of(context).size.height *0.25,
                        child: CupertinoPicker(
                          backgroundColor: Colors.white,
                          itemExtent:30,
                          scrollController: FixedExtentScrollController(initialItem: selectedValue),
                          children: const [
                            Text('0'),Text('1'),Text('2'),Text('3'),
                            Text('4'),Text('5'),Text('6'),Text('7'),
                          ],
                          onSelectedItemChanged:(int value) {
                            setState(() {
                              selectedValue = value;
                            });
                            Navigator.pop(context);
                          },
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          }
        )
      )
    );
  }
)

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