You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

DraggableScrollableSheet在max/minChildSize相同时上滑关闭问题

问题解决:DraggableScrollableSheet 同尺寸下上滑关闭弹窗而非滚动内部列表

当你把DraggableScrollableSheet的maxChildSize和minChildSize设为相同值时,组件默认仍会监听拖拽手势,但因为没有调整尺寸的空间,这些手势会被传递给上层的showModalBottomSheet,触发了弹窗的关闭逻辑,而非让内部的ListView处理滚动。

解决方法很简单,直接禁用DraggableScrollableSheet的拖拽功能即可:

import 'package:flutter/material.dart';

class DraggableBottomSheetTest extends StatelessWidget {
  const DraggableBottomSheetTest({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              builder: (context) {
                return DraggableScrollableSheet(
                  maxChildSize: 0.5,
                  minChildSize: 0.5,
                  initialChildSize: 0.5,
                  expand: false,
                  enableDrag: false, // 添加该行禁用拖拽
                  builder: (context, controller) => ListView.builder(
                    controller: controller,
                    itemCount: 50,
                    itemBuilder: (context, index) => ListTile(
                      title: Text('Item $index'),
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Show Modal BottomSheet'),
        ),
      ),
    );
  }
}

添加enableDrag: false后,DraggableScrollableSheet不再处理拖拽手势,滚动事件会完全交给内部的ListView,上滑时就会正常滚动列表,不会触发弹窗关闭。

另外,如果你不需要拖拽调整底部弹窗尺寸的功能,也可以直接用Container包裹ListView并设置固定高度(比如屏幕高度的50%),这样更简洁,能避免DraggableScrollableSheet带来的额外手势冲突。

内容的提问来源于stack exchange,提问作者Slick Slime

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 09:35:14