Flutter中能否实现从底部弹出且可下滑关闭的弹窗效果？

当然可以在Flutter中实现你要的这种从底部弹出、支持向下滑动关闭的模态界面效果，下面给你两种实用的实现方式：

1. 基础快速实现：showModalBottomSheet #

Flutter内置的showModalBottomSheet方法默认就支持向下滑动关闭，代码示例如下：

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        // 自定义弹窗内容
        return Container(
          height: 300,
          padding: const EdgeInsets.all(16),
          child: const Center(
            child: Text('底部弹窗内容'),
          ),
        );
      },
    );
  },
  child: const Text('弹出底部模态框'),
)

• 默认特性：支持向下滑动关闭、点击空白区域关闭；可通过enableDrag: false禁用滑动关闭，isDismissible: false禁用空白点击关闭；设置isScrollControlled: true可让弹窗适配键盘高度或占满更多屏幕空间。

2. 进阶可调整高度/滚动内容：DraggableScrollableSheet #

如果弹窗内容较多需要滚动，或者想自定义拖动时的高度范围，可以结合DraggableScrollableSheet使用，示例代码：

ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return DraggableScrollableSheet(
          initialChildSize: 0.5, // 初始高度为屏幕的50%
          minChildSize: 0.2, // 拖动后最小高度为屏幕的20%
          maxChildSize: 0.9, // 拖动后最大高度为屏幕的90%
          builder: (context, scrollController) {
            return Container(
              padding: const EdgeInsets.all(16),
              child: ListView.builder(
                controller: scrollController,
                itemCount: 20,
                itemBuilder: (context, index) {
                  return ListTile(title: Text('列表项 $index'));
                },
              ),
            );
          },
        );
      },
    );
  },
  child: const Text('弹出可拖动滚动的底部弹窗'),
)

• 优势：不仅支持向下滑动关闭，还能自由拖动调整弹窗高度，内容超出时自动支持滚动，完全匹配你展示的效果。

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