Flutter-底部分享弹窗（showModalBottomSheet）

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来管理底部表单的状态。在定时器触发后，检查控制器是否存在并且未关闭，然后手动关闭底部表单。这样就可以在一秒后关闭底部表单，同时确保在定时器触发时不会重复创建底部表单。