Flutter-底部选择弹窗(showModalBottomSheet)

ops/2024/11/13 9:47:53/

前言

现在有个需求,需要用底部弹窗来添加定时的重复。在这里使用原生的showModalBottomSheet来实现

showModalBottomSheet的Props

名称

描述

isScrollControlled全屏还是半屏
isDismissible外部是否可以点击,false不可以点击,true可以点击,点击后消失
backgroundColor背景色,通常可以设置白色和透明
barrierColor

设置遮挡底部的半透明颜色,默认是black54,可以设置成透明的;

置外部区域的颜色

enableDrag是否可以向下拖动关闭,默认是true打开的;
shapemodel边框样式
builder构造内容

关闭弹窗

Navigator.pop(context);

完整代码

showModalBottomSheet(context: context,backgroundColor: Colors.transparent,builder: (context) {return Container(height: 600.h,padding: EdgeInsets.symmetric(horizontal: 30.w),decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(30.w),topRight: Radius.circular(30.w),),color: Colors.white,),child: Column(children: [Container(height: 110.h,child: Center(child: Text("重复".tr,style: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.bold,),),),),RepeatModelItem(title: "启动一次".tr,isSelect: repeatDate.isEmpty,onPressed: () {Navigator.pop(context);},),RepeatModelItem(title: "每天".tr,isSelect: repeatDate.length == 7,onPressed: () {Navigator.pop(context);},),RepeatModelItem(title: "自定义".tr,isSelect: repeatDate.isNotEmpty && repeatDate.length < 7,onPressed: () {Navigator.pop(context);},),Container(margin: EdgeInsets.only(top: 20.h),child: TextButton(onPressed: () {Navigator.pop(context);},child: Text("取消".tr),),)],),);},);

 但是此时遇到了一个问题,在底部选择中使用多选框的是否不能选中

解决办法

使用StatefulBuilder实现局部刷新

showModalBottomSheet(isScrollControlled: true,context: context,backgroundColor: Colors.transparent,builder: (context) {//因为组件中用了多选框,要使多选框点击生效,所以这里使用了StatefulBuilder,实现局部刷新return StatefulBuilder(//弹窗内容builder: (context, setState) {return Container(height: 1050.h,padding: EdgeInsets.symmetric(horizontal: 30.w),decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(30.w),topRight: Radius.circular(30.w),),color: Colors.white,),child: Column(children: [// 标题SizedBox(height: 110.h,child: Center(child: Text("自定义".tr,style: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.bold,),),),),RepeatModelItem(title: "周一".tr,isSelect: customrepeatDate[0] == 1,onPressed: () {setState(() {customrepeatDate[0] = customrepeatDate[0] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周二".tr,isSelect: customrepeatDate[1] == 1,onPressed: () {setState(() {customrepeatDate[1] = customrepeatDate[1] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周三".tr,isSelect: customrepeatDate[2] == 1,onPressed: () {setState(() {customrepeatDate[2] = customrepeatDate[2] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周四".tr,isSelect: customrepeatDate[3] == 1,onPressed: () {setState(() {customrepeatDate[3] = customrepeatDate[3] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周五".tr,isSelect: customrepeatDate[4] == 1,onPressed: () {setState(() {customrepeatDate[4] = customrepeatDate[4] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周六".tr,isSelect: customrepeatDate[5] == 1,onPressed: () {setState(() {customrepeatDate[5] = customrepeatDate[5] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周日".tr,isSelect: customrepeatDate[6] == 1,onPressed: () {setState(() {customrepeatDate[6] = customrepeatDate[6] == 1 ? 0 : 1;});},),// 取消、确定按钮Container(margin: EdgeInsets.only(top: 20.h),child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [// 取消按钮TextButton(style: TextButton.styleFrom(minimumSize: Size(300.w, 80.h),),onPressed: () {setState(() {customrepeatDate =setcustomrepeatDate(repeatDate);});Navigator.pop(context);},child: Text("取消".tr),),// 确定按钮TextButton(style: TextButton.styleFrom(minimumSize: Size(300.w, 80.h),),onPressed: () {var repeatDate1 = [];for (var i = 0; i < 7; i++) {if (customrepeatDate[i] == 1) {repeatDate1.add(i + 1);}}// setState(() {//   repeatDate = repeatDate1;// });//用上面的方法我更新不了repeatDate数据,于是我将更新放在外面了,可能是setState是StatefulBuilder的setRepeatDate(repeatDate1);Navigator.pop(context);},child: Text("确定".tr),),],),)],),);},);},);


http://www.ppmy.cn/ops/111704.html

相关文章

【STM32】单级与串级PID控制的C语言实现

【STM32】单级与串级PID的C语言实现 前言PID理论什么是PIDPID计算过程PID计算公式Pout、Iout、Dout的作用单级PID与串级PID PID应用单级PID串级PID 前言 笔者最近在学习PID控制器&#xff0c;本文基于Blog做以总结。CSDN上已有大量PID理论知识的优秀文章&#xff0c;因此本文将…

【Kubernetes】(K8S)彻底卸载详细教程

以下全部操作都是使用root用户进行&#xff08;非root用户可以使用sudo&#xff09;&#xff0c;并且全部命令都需要在Kubernetes集群的所有节点分别执行&#xff1a; 第一步、停止K8S 所有节点执行&#xff1a; 1 2 3 systemctl stop kubelet systemctl stop etcd systemct…

[Web安全 网络安全]-XSS跨脚本攻击

文章目录&#xff1a; 一&#xff1a;前言 1.定义 2.漏洞出现的原因 3.鉴别可能存在XSS漏洞的地方 4.攻击原理 5.危害 6.防御 7.环境 7.1 靶场 7.2 自动扫描工具 7.3 手工测试工具 8.payload是什么 二&#xff1a;常用的标签语法 三&#xff1a;XSS的分类 反射…

ubuntu系统服务器离线安装python包

一、根据工程需要本地下载所需python包 1. 下载环境requirements.txt pip freeze > requirements.txt2. 根据requirements.txt下载python包 注意&#xff1a;查看服务器属于x_86架构还是arm架构、cpython还是pypy 2.1 确定服务器架构&#xff08;终端输入&#xff09; …

SpringBoot用kafka.listener监听接受Kafka消息

1.创建kafka监听配置并进行注册 import org.apache.kafka.clients.consumer.ConsumerConfig; import org.apache.kafka.common.serialization.StringDeserializer; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation…

连续时间,离散频率 傅里叶

时域周期——不是把一个信号周期化&#xff0c;而是周期信号取一个周期是x(t),对其周期化不会发生时域的重叠。故当接收到信号&#xff0c;在DFT时&#xff0c;以整个接收到的时间信号为周期进行延拓 推导公式时思路&#xff1a;时域卷积周期冲击&#xff0c;用傅里叶变换推导出…

react 基础语法

前置知识 类的回顾 通过class关键字定义一个类 类名首字母大写 class类有constructor构造器 new 一个类得到一个实例 类还有方法&#xff0c;该方法也会在其原型上 static静态数据&#xff0c;访问静态属性通过 类名.id getter和setter getter&#xff1a;定义一个属性&…

Android 11(API 级别 30)及以上版本中,将Bitmap保存到设备上

调用 saveBitmapToMediaStore(getContentResolver(),bitmap,“图片名”,mimeType); 参数解析&#xff1a; Bitmap myBitmap ...; // 这里应该是你获取或创建Bitmap的代码 private String mimeType "image/jpeg"; // 或者"image/png"&#xff0c;取决于…