Flutter-底部分享弹窗(showModalBottomSheet)

devtools/2024/12/22 23:02:25/

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


http://www.ppmy.cn/devtools/144129.html

相关文章

【Spring框架 三】

Spring框架 三 SpringWeb开发框架框架概述核心组件RESTful Web Services异常处理过滤器和拦截器 总结 Spring Spring框架是一个开源的Java应用程序框架&#xff0c;它提供了一种轻量级的解决方案&#xff0c;用于开发企业级Java应用程序。Spring框架的核心原则是依赖注入&…

QT5.9.9+ARM交叉编译开发环境搭建【详细步骤】

文章目录 1.前言2.Linaro编译器下载2.qt-everywhere编译安装3.Linux下QT Creator安装4.交叉编译环境配置5.QTARM程序打包参考文献 1.前言 本文将以32位的ARM开发板为例&#xff0c;搭建基于Ubuntu 16.04虚拟机的QTARM开发环境&#xff0c;使用的软件如下&#xff1a; 序号软件…

电气设计 | 低压接地系统:TN-C 、TN-S、TN-C-S、TT适用哪些场所?

电气设计 | 低压接地系统&#xff1a;TN-C 、TN-S、TN-C-S、TT适用哪些场所&#xff1f; 1、低压配电系统简介2、各种低压配电系统介绍2.1、TN-C系统2.2、TN-S系统2.3、TN-C-S 系统2.4、TT 系统2.5、IT 系统 1、低压配电系统简介 低压配电系统有TN-C、TN-S、TN-C-S、TT和IT五种…

设计模式-读书笔记2

结构型模式 适配器模式 不兼容结构的协调 220v接入20v的笔记本电脑 别名包装器 Wrapper 适配器类Adapter 适配者类Adaptee 目标抽象类 Target //demo1 class Adapter extends Target{private Adaptee adaptee; //维持对一个适配者对象的引用public Adapter (Adaptee adapte…

基于Arduino的平衡车机械臂

两轮驱动机器人车与机械臂的DIY指南 视频&#xff1a; 基于Arduino的平衡车机械臂 资料下载链接 引言 在这篇文章中&#xff0c;我们将一起探索如何构建一个两轮驱动的机器人车&#xff0c;并配备有一个机器人臂&#xff0c;这个项目适合初学者&#xff0c;并且可以在动态环…

如何设计一个秒杀系统

开局一张图 结局要说清 对于设计一个秒杀系统&#xff0c;结合图片分层结构&#xff0c;根据每一层从访问层&#xff0c;负载层&#xff0c;服务层&#xff0c;业务层&#xff0c;支撑层&#xff0c;数据层&#xff0c;详细说明每一层应该怎么设计。 应该注意那些事项。比如访…

【Prometheus 】【实战篇(五)】深入解析 Prometheus 监控指标类型:Counter、Gauge、Histogram 和 Summary

Prometheus 提供了四种核心的指标类型&#xff0c;分别是 Counter&#xff08;计数器&#xff09;、Gauge&#xff08;仪表&#xff09;、Histogram&#xff08;直方图&#xff09;和 Summary&#xff08;摘要&#xff09;。这些指标类型在客户端库中有具体的使用说明&#xff…

ArcGIS Pro 3.4新功能2:Spatial Analyst新特性,密度、距离、水文、太阳能、表面、区域分析

Spatial Analyst 扩展模块在 ArcGIS Pro 3.4 中引入了新功能和增强功能。此版本为您提供了用于表面和区域分析的新工具以及改进的密度和距离分析功能&#xff0c;多种用于水文分析的工具性能的提高&#xff0c;一些新的太阳能分析功能。 目录 1.密度分析 2.距离分析 3.水文…