如何禁用/退出底部表单模态中的向下拖动手势,以便用户可以在模态中交互,而不会意外关闭模态?使用实际模态底表更新以下内容。
return showModalBottomSheet( context: context, builder: (BuildContext context) { ... } }
nle07wnf1#
将enableDrag设置为false布尔值启用拖动如果为真,则可以上下拖动底部工作表,并通过向下滑动来解除。https://docs.flutter.io/flutter/material/BottomSheet/enableDrag.html
enableDrag
false
ifmq2ha22#
您可以尝试使用onVerticalDragStart =(_){}将生成器的结果与GestureDetector Package 在一起
showModalBottomSheet( context: context, builder: (context) => GestureDetector( child: **any_widget_here**, onVerticalDragStart: (_) {}, ), isDismissible: false, isScrollControlled: true, );
c6ubokkw3#
如果您仍然希望在模态中滚动而不需要用户拖动和关闭它,您可以使用以下命令:
showModalBottomSheet( context: context, enableDrag: false, shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical( top: Radius.circular(20), ), ), clipBehavior: Clip.antiAliasWithSaveLayer, builder: (context) => DraggableScrollableSheet( expand: false, initialChildSize: 0.9, minChildSize: 0.5, maxChildSize: 0.9, builder: (context, scrollController) { return SingleChildScrollView( child: new Container( color: Colors.white, child: buildTitleWidget(), ), ); }, ), isDismissible: false, isScrollControlled: true, );
技巧是不要将scrollController添加到SingleChildScrollView
builder: (context, scrollController) { return SingleChildScrollView( controller: scrollController <-- HERE child: new Container( color: Colors.white, child: buildTitleWidget(), ), ); },
dphi5xsq4#
我想要一个可以上下拖动的bottomSheet,但是在向下拖动时不会关闭。我的想法是,如果它一关闭,我就再次调用它会怎么样?在这里,递归来拯救它。所以,首先我为我的modalBottomSheet创建了一个函数。
Future modalBottomSheetShow(BuildContext context) { return showModalBottomSheet( backgroundColor: Colors.transparent, context: context, builder: (context) => buildSheet(), isDismissible: false, elevation: 0, ); }
接下来,我使用showModalBottomSheet()的.whenComplete()方法递归调用modalBottomSheetShow()函数。
Future modalBottomSheetShow(BuildContext context) { return showModalBottomSheet( backgroundColor: Colors.transparent, context: context, builder: (context) => buildSheet(), isDismissible: false, elevation: 0, ).whenComplete(() => modalBottomSheetShow(context)); }
接下来,只要我想要一个底部表单,我就调用modalBottomSheetShow()。它不能被关闭,直到递归结束。下面是完整的代码供参考:
import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); static const idScreen = "HomePage"; @override State<HomePage> createState() => _HomePageState(); } @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) async { modalBottomSheetShow(context); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( toolbarHeight: 0, elevation: 0, backgroundColor: Colors.black, ), ); } Widget buildSheet() { return DraggableScrollableSheet( initialChildSize: 0.6, builder: (BuildContext context, ScrollController scrollController) { return Container( decoration: BoxDecoration(color: Colors.white, boxShadow: [ BoxShadow( color: Color(0x6C000000), spreadRadius: 5, blurRadius: 20, offset: Offset(0, 0), ) ]), padding: EdgeInsets.all(16), ); }, ); } Future modalBottomSheetShow(BuildContext context) { return showModalBottomSheet( backgroundColor: Colors.transparent, context: context, builder: (context) => buildSheet(), isDismissible: false, elevation: 0, ).whenComplete(() => modalBottomSheetShow(context)); } }
4条答案
按热度按时间nle07wnf1#
将
enableDrag
设置为false
布尔值启用拖动
如果为真,则可以上下拖动底部工作表,并通过向下滑动来解除。
https://docs.flutter.io/flutter/material/BottomSheet/enableDrag.html
ifmq2ha22#
您可以尝试使用onVerticalDragStart =(_){}将生成器的结果与GestureDetector Package 在一起
c6ubokkw3#
如果您仍然希望在模态中滚动而不需要用户拖动和关闭它,您可以使用以下命令:
技巧是不要将scrollController添加到SingleChildScrollView
dphi5xsq4#
我想要一个可以上下拖动的bottomSheet,但是在向下拖动时不会关闭。我的想法是,如果它一关闭,我就再次调用它会怎么样?在这里,递归来拯救它。所以,首先我为我的modalBottomSheet创建了一个函数。
接下来,我使用showModalBottomSheet()的.whenComplete()方法递归调用modalBottomSheetShow()函数。
接下来,只要我想要一个底部表单,我就调用modalBottomSheetShow()。它不能被关闭,直到递归结束。下面是完整的代码供参考: