在下拉事件中检测模态表答案

【问题标题】：Detecting Modal Sheet On Drag Down Event在下拉事件中检测模态表
【发布时间】：2025-12-14 02:50:01
【问题描述】：

是否可以在底部工作表被向下拖动时拦截事件，并在即将关闭时显示消息？

【问题讨论】：

如果您只是想在底部工作表关闭时收到通知，您可以依赖 showBottomSheet() 返回的控制器，该控制器公开closed().

标签： flutter flutter-layout flutter-dependencies flutter-animation

【解决方案1】：

这不是一个确定的答案，但我在这里发帖是因为它提供了一个方向并且对于评论来说太长了（因为链接）。

BottomSheet 类定义了BottomSheetDragStartHandler，这是用户开始拖动底部工作表时的回调。

_ModalBottomSheet 将 this 作为 onDragStart 和 this 作为 onDragEnd 参数传递给它的 BottomSheet 子项。

所以理论上，如果你真的想，你可以按照_ModalBottomSheet的例子来实现自定义底页，并根据需要定制。

【讨论】：

【解决方案2】：

试试这个，

我添加了检查bottomSheet打开或关闭的布尔变量，（这也是我在 appBar 中打印出来的操作）。

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
  bool isOpen = false;

  var bottomSheetController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: isOpen?Text("Open Bottom Sheet"):Text("Closed Bottom Sheet"),
      ),
        body:
        FloatingActionButton(
          onPressed: () {
            setState(() {
              isOpen = !isOpen;
            });
            print('clicked on the bottom sheet');
            if(isOpen) {
              bottomSheetController = showBottomSheet(
                  backgroundColor: Colors.transparent,
                  context: context,
                  builder: (ctx) {
                    return ClipRRect(
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(20),
                        topLeft: Radius.circular(20),
                      ),
                      child: Container(
                          height: 150,
                          color: Colors.black,
                          child: TextField()
                      ),
                    );
                  });
              bottomSheetController.closed.then((value) {
                setState(() {
                  isOpen = !isOpen;
                });
              });
            } else {
              Navigator.of(context).pop();
              setState(() {
                isOpen = !isOpen;
              });
            }
          },
          child: isOpen?Icon(Icons.arrow_downward):Icon(Icons.arrow_upward),
        ),
      );
  }
}

【讨论】：

【解决方案3】：

您可以使用这个小部件：BottomSheet。它提供了方法：onDragStart()、onDragEnd() 和一个更有用的方法：onClosing，这正是您正在寻找的。p>

    BottomSheet(
      enableDrag: true  // required
      onClosing: () {
        /* intercept close event */
        showDialog();
      }
    )

但是，这里唯一需要注意的是，我们只能在 Scaffold 中使用这个 BottomSheet。

  Scaffold(
    appBar: AppBar(...),
    body: Container(...),
    bottomSheet: BottomSheet(
      onClosing: () {},
      builder: () => Container(...),
    )   
  )

这会产生一个持久的底部工作表。要控制其可见性，您必须使用 Stateful 小部件并为此设置一个布尔标志。

See here 获取完整示例。

【讨论】：