Flutter中showModalBottomSheet能否实现动态高度且支持拖拽？

完全可以实现，核心是利用Flutter的DraggableScrollableSheet组件与showModalBottomSheet配合，既能指定初始高度，又能支持拖拽展开/收起。

实现步骤与代码示例 #

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 允许弹窗占满屏幕高度
  backgroundColor: Colors.transparent, // 隐藏默认弹窗背景，让自定义容器生效
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.3, // 初始高度为屏幕高度的30%
      minChildSize: 0.3, // 限制最小高度与初始高度一致，防止拖拽缩小
      maxChildSize: 0.9, // 最大可展开至屏幕高度的90%
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
          ),
          child: SingleChildScrollView(
            controller: scrollController, // 关联滚动控制器，实现拖拽与滚动联动
            padding: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom, // 适配键盘弹出高度
            ),
            child: Column(
              children: [
                // 拖拽指示器（提升用户体验）
                const SizedBox(height: 8),
                Container(
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                const SizedBox(height: 16),
                // 自定义内容区域（示例为长列表）
                for (int i = 0; i < 20; i++)
                  ListTile(
                    title: Text('列表项 $i'),
                  ),
              ],
            ),
          ),
        );
      },
    );
  },
);

关键参数说明 #

• initialChildSize: 初始高度占屏幕总高度的比例（范围0~1），比如0.3对应30%屏幕高度
• minChildSize: 弹窗允许的最小高度比例，设置与initialChildSize一致可避免弹窗被拖拽缩小
• maxChildSize: 弹窗允许的最大高度比例，比如0.9表示最多占90%屏幕高度，留顶部空间避免遮挡状态栏
• scrollController: 将DraggableScrollableSheet的控制器传给SingleChildScrollView，实现拖拽展开与内容滚动的联动
• MediaQuery.viewInsets.bottom: 自动适配键盘弹出时的高度，确保内容不会被键盘遮挡

替代方案（无DraggableScrollableSheet） #

如果不需要拖拽展开的平滑过渡，也可以直接通过showModalBottomSheet的constraints参数固定高度范围，配合可滚动内容：

showModalBottomSheet(
  context: context,
  constraints: const BoxConstraints(
    minHeight: 200,
    maxHeight: 600,
  ),
  builder: (context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          // 内容区域
        ],
      ),
    );
  },
);

但这种方案的拖拽体验不如DraggableScrollableSheet流畅，更适合简单场景。

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