Flutter技术问题：如何监听CupertinoPicker所在BottomSheet的关闭事件？

嘿，针对你在Flutter Gallery里研究CupertinoPicker时遇到的BottomSheet关闭监听问题，我给你整理了几个实用的解决方案：

这是最直接的实现方式——showModalBottomSheet本身会返回一个Future，不管BottomSheet是被点击空白区域关闭、物理返回键触发关闭，还是通过代码调用Navigator.pop关闭，这个Future都会在Sheet关闭时完成。你可以通过.then()方法来监听这个关闭事件：

void _showCupertinoPickerSheet() {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return GestureDetector(
        // 阻止点击事件透传到底层，避免误关Sheet
        onTap: () {},
        child: SafeArea(
          child: CupertinoPicker(
            scrollController: scrollController,
            itemExtent: _kPickerItemHeight,
            backgroundColor: CupertinoColors.white,
            onSelectedItemChanged: (int index) {
              setState(() {
                _selectedItemIndex = index;
              });
            },
          ),
        ),
      );
    },
  ).then((_) {
    // 这里就是BottomSheet关闭后的回调逻辑
    print("BottomSheet已关闭，当前选中项索引：$_selectedItemIndex");
    // 你可以在这里执行保存选中值、刷新页面等操作
  });
}

如果你需要区分用户是通过物理返回键关闭Sheet，还是想在关闭前做一些拦截操作（比如确认用户是否真的要关闭），可以在BottomSheet的根Widget外层包裹WillPopScope：

void _showCupertinoPickerSheet() {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return WillPopScope(
        onWillPop: () async {
          // 这里可以处理物理返回键触发的关闭逻辑
          print("用户尝试通过物理返回键关闭BottomSheet");
          // 返回true允许关闭，返回false则阻止Sheet关闭
          // 比如可以在这里弹出确认对话框：
          // return await showDialog(...);
          return true;
        },
        child: GestureDetector(
          onTap: () {},
          child: SafeArea(
            child: CupertinoPicker(
              scrollController: scrollController,
              itemExtent: _kPickerItemHeight,
              backgroundColor: CupertinoColors.white,
              onSelectedItemChanged: (int index) {
                setState(() {
                  _selectedItemIndex = index;
                });
              },
            ),
          ),
        ),
      );
    },
  ).then((_) {
    // 无论通过哪种方式关闭Sheet，这里都会触发
    print("BottomSheet已关闭");
  });
}

如果你的BottomSheet有自定义的关闭按钮（比如顶部的"确定"按钮），可以在调用Navigator.pop时传递选中的参数，然后在.then()中接收：

void _showCupertinoPickerSheet() {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 自定义确定按钮
          TextButton(
            onPressed: () {
              // 关闭Sheet时传递当前选中的索引
              Navigator.pop(context, _selectedItemIndex);
            },
            child: const Text("确定"),
          ),
          SizedBox(
            height: 200, // 设置Picker的高度
            child: CupertinoPicker(
              scrollController: scrollController,
              itemExtent: _kPickerItemHeight,
              backgroundColor: CupertinoColors.white,
              onSelectedItemChanged: (int index) {
                setState(() {
                  _selectedItemIndex = index;
                });
              },
            ),
          ),
        ],
      );
    },
  ).then((selectedIndex) {
    if (selectedIndex != null) {
      print("用户确认选择，选中索引：$selectedIndex");
    } else {
      print("用户取消了选择");
    }
  });
}

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