Flutter中点击BottomSheet外部关闭失效及DraggableScrollableSheet的maxChildSize、minChildSize不生效问题解决

你的问题出在GestureDetector的范围覆盖了整个DraggableScrollableSheet，导致拖拽手势被拦截，max/minChildSize自然无法生效。下面是修复方案和详细解释：

问题根源 #

你之前的修改用GestureDetector直接包裹了整个DraggableScrollableSheet，并设置behavior: HitTestBehavior.opaque——这个属性会让GestureDetector捕获所有触摸事件，包括DraggableScrollableSheet本身的拖拽手势。Sheet没法响应拖拽，maxChildSize和minChildSize的大小控制逻辑自然就失效了。

正确解决方案 #

我们需要让GestureDetector只覆盖Sheet以外的屏幕区域（也就是你说的"外部"），而Sheet本身保留拖拽交互能力。具体实现是用Stack分层：底层放全屏的GestureDetector（负责点击关闭），上层放DraggableScrollableSheet（保留拖拽和大小控制）。

修改后的AssetScreen代码：

class AssetScreen extends StatelessWidget {
  const AssetScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 点击Sheet外部区域关闭BottomSheet
        GestureDetector(
          onTap: () => Navigator.pop(context),
          behavior: HitTestBehavior.opaque,
          child: const SizedBox.expand(), // 占满全屏
        ),
        DraggableScrollableSheet(
          initialChildSize: 0.79,
          maxChildSize: 0.79, // 可根据需求调整，比如改成0.9
          minChildSize: 0.3,
          expand: false, // 关键配置：让Sheet仅占用自身所需高度，而非全屏
          builder: (_, controller) => Container(
            color: const Color(0xff757575),
            child: Container(
              padding: const EdgeInsets.all(30.0),
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: const [
                  SizedBox(height: 10),
                  Text("你的设置内容"),
                  Center(
                    child: Column(
                      children: [],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

关键配置说明 #

1. Stack分层布局：底层的GestureDetector占满全屏，仅响应Sheet未覆盖区域的点击；上层的DraggableScrollableSheet独立处理自身的拖拽交互。
2. expand: false：这是让DraggableScrollableSheet大小控制生效的核心——如果设为true，Sheet会强制占满父容器，initial/max/minChildSize的比例控制就会失效。
3. 保留原showModalBottomSheet配置：继续使用isScrollControlled: true和backgroundColor: Colors.transparent，确保Stack能占满全屏，让外部点击区域的GestureDetector正常工作。

这样修改后，既能点击Sheet外部关闭弹窗，又能通过拖拽调整Sheet高度，maxChildSize和minChildSize也会按预期限制Sheet的范围。

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