showModalBottomSheet 构造函数的样式
Future<T?> showModalBottomSheet<T>({required BuildContext context, // 上下文对象,通常是当前页面的上下文bool isScrollControlled = false, // 控制底部弹窗的大小,如果为 true,则弹窗可以根据内容大小自动调整bool isDismissible = true, // 是否点击外部区域时可以关闭弹窗bool enableDrag = true, // 是否允许拖动弹窗来关闭double? backgroundColor, // 背景颜色ShapeBorder? shape, // 弹窗的形状(圆角、矩形等)Color? barrierColor, // 点击外部区域的背景颜色required WidgetBuilder builder, // 弹出框的内容
})
需求描述
当弹窗正在展示的时候,就不会二次展示
可以使用PersistentBottomSheetController
,它提供了对底部表单的更细粒度的控制。以下是修改后的代码:
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {PersistentBottomSheetController bottomSheetController;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Popup Demo'),),body: Center(child: ElevatedButton(onPressed: () {// 点击按钮时触发底部表单startBottomSheet();},child: Text('显示底部表单'),),),);}void startBottomSheet() {// 如果底部表单已经存在,则不再新建底部表单if (bottomSheetController == null || bottomSheetController?.isClosed == true) {bottomSheetController = showModalBottomSheet(context: context,builder: (BuildContext context) {return Container(height: 200.0,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('底部表单内容'),ElevatedButton(onPressed: () {// 关闭底部表单Navigator.of(context).pop();},child: Text('关闭'),),],),);},);// 一秒后关闭底部表单Future.delayed(Duration(seconds: 1), () {// 使用控制器关闭底部表单if (bottomSheetController != null && !bottomSheetController.isClosed) {bottomSheetController.close();}});}}
}
在这个示例中,使用PersistentBottomSheetController
来管理底部表单的状态。在定时器触发后,检查控制器是否存在并且未关闭,然后手动关闭底部表单。这样就可以在一秒后关闭底部表单,同时确保在定时器触发时不会重复创建底部表单。