Flutter-底部分享弹窗(showModalBottomSheet)

ops/2024/12/20 7:57:54/

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/ops/143419.html

相关文章

Scala的泛型

泛型 泛型类 泛型trait 定义格式&#xff1a;trait 特质名[泛型] 使用格式&#xff1a;特质名[具体的类型]

CSS3:重塑网页设计的新力量

在前端开发领域&#xff0c;CSS3 的出现无疑是一场变革的风暴&#xff0c;它为网页设计师和开发者带来了前所未有的创意空间与功能提升&#xff0c;让网页从视觉效果到用户体验都实现了质的飞跃。 一、强大的选择器扩展 CSS3 新增了众多实用的选择器。属性选择器变得更加灵…

【报表查询】.NET开源ORM框架 SqlSugar 系列

文章目录 前言实践一、按月统计没有为0实践二、 统计某月每天的数量实践三、对象和表随意JOIN实践四、 List<int>和表随意JOIN实践五、大数据处理实践六、每10分钟统计Count实践七、 每个ID都要对应时间总结 前言 在我们实际开发场景中&#xff0c;报表是最常见的功能&a…

XMLHttpRequest接受chunked编码传输的HTTP Response时有问题

实际中遇到的问题&#xff0c;虽然没有最终解决&#xff0c;但是浪费了好长事件&#xff0c;记录下来&#xff0c;避免再次踩坑。 现在前端框架发送Ajax请求时&#xff0c;大部分组件最终都是调用的XMLHttpRequest对象来发送和接受请求。 使用XMLHttpRequest接受流式chunked编…

前端项目性能优化(详细)

‌前端项目的性能优化可以从多个方面进行&#xff0c;包括减少页面重绘和回流、优化加载速度、图片优化、代码优化等。‌ 减少页面重绘和回流 ‌减少重绘和回流‌&#xff1a;重绘&#xff08;repaint&#xff09;是指当元素样式改变但不影响布局时&#xff0c;浏览器只需重新…

微服务设计原则——功能设计

文章目录 1.ID生成2.数值精度3.DB操作4.性能测试5.版本兼容5.1 向旧兼容5.2 向新兼容 6.异步时序问题7.并发问题7.1 并发时序7.2 并发数据竞争 参考文献 1.ID生成 在分布式系统中&#xff0c;生成全局唯一ID是非常重要的需求&#xff0c;因为需要确保不同节点、服务或实例在并…

MySQL迁移SQLite 借助PYTHON脚本

使用 Python 脚本将 MySQL 数据库迁移到 SQLite 是一种灵活且强大的方法。 下面是一个基本的脚本示例&#xff0c;使用 pandas 和 sqlite3 库来实现这一过程。 这个脚本假设你已经安装了 pandas 和 mysql-connector-python 库。 步骤 安装必要的库: 如果尚未安装&#xff…

【自动驾驶】单目摄像头实现自动驾驶3D目标检测

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;传知代码 欢迎大家点赞收藏评论&#x1f60a; 目录 概述算法介绍演示效果图像推理视频推理 核心代码算法处理过程使用方式环境搭建下载权重文件pytorch 推理&#xff08;自动选择CPU或GPU&#x…