Flutter-底部选择弹窗(showModalBottomSheet)

news2024/11/8 1:36:02

前言

现在有个需求,需要用底部弹窗来添加定时的重复。在这里使用原生的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.coloradmin.cn/o/2130126.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

剪花布条(KPM模板题)

思路&#xff1a;套用KMP模板即可。 #include<bits/stdc.h> using namespace std; #define IOS ios::sync_with_stdio(false);cin.tie(0);cout.tie(0); #define endl \n int ne[200005]; int main() {IOSstring a,b;while(cin >> a){if(a"#") break;cin …

LEAN 类型系统属性 之 算法式相等的非传递性(Algorithm equality is not transitive)注解

由于 subsingleton 使用函数&#xff08;eliminator&#xff09; 的存在&#xff0c;导致算法式相等&#xff08;Algorithm defintional equality&#xff09;的非传递性。 在《定义上相等的非确定性&#xff08;Undecidability of Definitional Equality&#xff09;》 中有&…

[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 4 搭建项目] 10 Ant Design Vue 的注册

1.全局全部注册 这样就可以将 ant design vue 全部组件注册进来 2.全局部分注册 这样就是按需注册了 本次&#xff0c; 我们选择第1种方式&#xff0c;全部注册进来 3.注册全局 css 4.测试一下 在 AboutView.vue 中添加一个 Test 按钮 使用 npm run serve 启动服务 访问 A…

如何通过subprocess在数据采集中执行外部命令 —以微博为例

介绍 在现代网络爬虫开发中&#xff0c;爬虫程序常常需要与外部工具或命令交互&#xff0c;以完成一些特定任务。subprocess 是 Python 提供的强大模块&#xff0c;用于启动和管理外部进程&#xff0c;广泛应用于爬虫技术中。本文将探讨如何通过 subprocess 在爬虫中执行外部命…

k8s 常见问题梳理

1、“cni0” already has an IP address different from 10.244.2.1/24 删除网卡 ifconfig cni0 down ip link delete cni0ip link add cni0 type bridge ip link set dev cni0 up ifconfig cni0 10.244.2.1/24 ifconfig cni0 mtu 1450 up

二.Unity中使用虚拟摇杆来控制角色移动

上一篇中我们完成了不借助第三方插件实现手游的虚拟摇杆&#xff0c;现在借助这个虚拟摇杆来实现控制角色的移动。 虚拟摇杆实际上就给角色输出方向&#xff0c;类似于键盘的WSAD&#xff0c;也是一个二维坐标&#xff0c;也就是(-1,1)的范围&#xff0c;将摇杆的方向进行归一化…

Windows与Linux下 SDL2的第一个窗口程序

Windows效果和Linux效果如下&#xff1a; 下面是代码&#xff1a; #include <stdio.h> #include "SDL.h"int main(int argc, char* argv[]) { // 初始化SDL视频子系统if (SDL_Init(SDL_INIT_VIDEO) ! 0){// 如果初始化失败&#xff0c;打印错误信息printf(&…

HPA自动扩缩容和命名空间资源限制

目录 HPA概念 安装HPA的依赖环境 安装metrics-server 手动扩缩容 自动扩缩容 yaml文件 创建HPA 自动扩容 自动缩容 命名空间资源限制 HPA概念 HPA是针对pod的数量进行自动扩缩容。&#xff08;是针对控制器deployment、replicaset、StatefulSet创建的pod&#xff0…

TS接口、泛型、自定义类型

这里记录下typescript中接口、泛型和自定义类型的使用 接口定义 // 定义一个接口,用来限制Teacher的属性 export interface Teacher {name: string;age: number;gender: string; }export type teacherList Teacher[];// 一个自定义类型 export type Teachers Array<Teach…

【UE5 C++课程系列笔记】02——创建C++类的三种方式

目录 一、从UE编辑器中创建 引用头文件报错的两种解决方式 &#xff08;1&#xff09;方式1 &#xff08;2&#xff09;方式2 二、在文件夹中直接创建 三、在Visual Studio中创建 一、从UE编辑器中创建 在UE编辑器中选择“Tools-》New C Class” 这里新建的类的父类选择…

Gitlab 中几种不同的认证机制(Access Tokens,SSH Keys,Deploy Tokens,Deploy Keys)

前言 公司主要使用 Go 语言做项目&#xff0c;有一些 Gitlab 私有仓库需要引用&#xff0c;在做 CI 时&#xff0c;要自行配置权限以获取代码。 最近发现各个项目组在做 CI 遇到仓库权限问题时的解决方式不尽相同&#xff0c;有用 Project Token 的&#xff0c;有用 Deploy K…

【python】OpenCV—Augmented Reality Using Aruco Markers

文章目录 1、任务描述2、Aruco Markers3、代码实现4、更多例子展示5、涉及到的库cv2.findHomography 6、参考 1、任务描述 借助 Aruco Markers&#xff0c;替换墙面上画面中的内容 2、Aruco Markers OpenCV 中的 aruco 模块共有 25 个预定义的标记字典。字典中的所有标记包含…

新代机床采集数据

新代集團1995年成立於台灣新竹,事業版圖遍布全球,以台灣為中心向外發展,據點橫跨歐洲、美洲、亞洲三大洲。新代長期深耕於機床控制器的軟體及硬體技術研發,專注於運動控制領域,目前已成為亞太市場中深具影響力的控制器領導品牌之一。主營產品包括:機床數控系統、伺服驅動…

Java虚拟机 - 高级篇

一、GraalVM 1. 什么是GraalVM 2. GraalVM的两种运行模式 &#xff08;1&#xff09;JIT即时编译模式 &#xff08;2&#xff09;AOT提前编译模式 3. 应用场景 4. 参数优化和故障诊断 二、新一代的GC 1. 垃圾回收器的技术演进 2. Shenandoah GC 测试代码&#xff1a; /** C…

Ubuntu 20.04/22.04无法连接网络(网络图标丢失、找不到网卡)的解决方案

问题复述&#xff1a; Ubuntu 20.04无法连接到网络&#xff0c;网络连接图标丢失&#xff0c;网络设置中无网络设置选项。 解决方案 对于Ubuntu 20.04而言&#xff1a;逐条执行 sudo service network-manager stopsudo rm /var/lib/NetworkManager/NetworkManager.statesudo…

《深度学习》OpenCV轮廓检测 模版匹配 解析及实现

目录 一、模型匹配 1、什么是模型匹配 2、步骤 1&#xff09;提取模型的特征 2&#xff09;在图像中查找特征点 3&#xff09;进行特征匹配 4&#xff09;模型匹配 3、参数及用法 1、用法 2、参数 1&#xff09;image&#xff1a;待搜索对象 2&#xff09;templ&am…

利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(四)

简介 随着生成式人工智能的兴起&#xff0c;传统的 BI 报表功能已经无法满足用户对于自动化和智能化的需求&#xff0c;今天我们将介绍亚马逊云科技平台上的AI驱动数据可视化神器 – Quicksight&#xff0c;利用生成式AI的能力来加速业务决策&#xff0c;从而提高业务生产力。…

科技之光,照亮未来之路“2024南京国际人工智能展会”

全球科技产业的版图正以前所未有的速度重构&#xff0c;而位于中国东部沿海经济带的江浙沪地区&#xff0c;作为科技创新与产业升级的高地&#xff0c;始终站在这一浪潮的最前沿。2024年&#xff0c;这一区域的科技盛宴——“2024南京人工智能展会”即将在南京国际博览中心盛大…

基础的八股

JS this 全局&#xff1a;this指向window 函数&#xff1a;this指向window 对象&#xff1a;this指向调用它的 get、post的区别 1、写的地方不同&#xff1a;get在地址栏里 地址栏有多长就只能写多少、post在请求体里 没有上限 2、关于回退和刷新&#xff1a;get回退和刷新没问…

TCP、UDP、HTTPS、HTTP

前言 OSI七层网络 名称解释协议应用层定义了各种应用协议的数据规范 HTTP、HTTPS、SSL FTP、DNS TFTP、SMTP 表示层不同系统之间通信会话层断点续传传输层 一个电脑有许多端口&#xff0c;根据端口找到发送方与接收方 确保数据包完整性 TCP、UDP网络层 ARP协议&#xff1a;通过…