当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/506552.html

相关文章:

  • 初学stm32 --- 时钟配置
  • LeetCode:226.翻转二叉树
  • (css)鼠标移入或点击改变背景图片
  • Unbuntu下怎么生成SSL自签证书?
  • OpenGL ES 03 加载3张图片并做混合处理
  • 深度学习-74-大语言模型LLM之基于API与llama.cpp启动的模型进行交互
  • PyTorch 2.0 中设置默认使用 GPU 的方法
  • 如何在 Ubuntu 22.04 服务器上安装 Jenkins
  • 【一篇搞定配置】如何在Ubuntu上配置单机/伪分布式Hadoop
  • 利用Map集合设计程序,存储城市和对应等级相关信息
  • 【自动驾驶】单目摄像头实现自动驾驶3D目标检测
  • 21 go语言(golang) - gin框架安装及使用(二)
  • Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch(CPU版本)
  • 【Unity3D】实现可视化链式结构数据(节点数据)
  • Three.js推荐-可以和Three.js结合的动画库
  • 增强现实(AR)和虚拟现实(VR)的应用
  • 告别机器人味:如何让ChatGPT写出有灵魂的内容
  • 【Threejs】从零开始(六)--GUI调试开发3D效果
  • Cocos Creator 试玩广告开发
  • 快速解决oracle 11g中exp无法导出空表的问题
  • selenium 报错 invalid argument: invalid locator
  • Flink2.0未来趋势中需要注意的一些问题
  • 机械鹦鹉与真正的智能:大语言模型推理能力的迷思
  • 本地电脑使用命令行上传文件至远程服务器
  • 【系统】Windows11更新解决办法,一键暂停
  • 34. Three.js案例-创建球体与模糊阴影
  • Qt同步读取串口
  • 如何用上AI视频工具Sora,基于ChatGPT升级Plus使用指南
  • 对象的状态变化处理与工厂模式实现
  • 关于IP代理API,我应该了解哪些功能特性?以及如何安全有效地使用它来隐藏我的网络位置?