Flutter：使用showModalBottomSheet更新父组件不调用Navigator.pop()

不用Navigator.pop关闭弹窗，直接给弹窗组件传递回调函数就能实现需求，具体修改如下：

1. 修改父视图的弹窗调用逻辑 #

给FontPickerSheet传入一个回调函数，用来接收选中的字体值并实时更新父组件状态：

void showFontPicker() {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    isDismissible: true,
    builder: (context) => FontPickerSheet(
      onFontSelected: (int value) {
        setState(() {
          widget.myPostcard.font = value;
        });
      },
    ),
  );
}

2. 修改FontPickerSheet组件 #

让组件接收回调参数，在字体选中时直接调用回调通知父组件更新，而不是关闭弹窗：

class FontPickerSheet extends StatelessWidget {
  // 定义回调参数
  final Function(int) onFontSelected;

  const FontPickerSheet({Key? key, required this.onFontSelected}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPicker(
      itemExtent: 30,
      onSelectedItemChanged: (int value) {
        // 调用回调，把选中值传给父组件
        onFontSelected(value);
      },
      // 补充你的字体选项列表
      children: [
        // 示例：Text("字体1"), Text("字体2")...
      ],
    );
  }
}

原理说明 #

通过回调函数将父组件的状态更新逻辑传递给弹窗，弹窗每次选中新字体时触发回调，父组件收到值后立即执行setState更新视图，全程不会关闭弹窗，实现实时预览字体效果的需求。

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