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
相关产品推荐
相关产品推荐

