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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PersistentBottomSheetController bottomSheetController;

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