第二百三十二回

文章目录

  • 1. 概念介绍
  • 2. 实现方法
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结

我们在上一章回中介绍了"自定义TimePicker组件"相关的内容,本章回中将继续介绍该组件.闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在上一章回是介绍了中如何自定义TimePicker组件,不过该组件单独显示的话不太方便,比如官方的TimePicke就是通过对话框形式弹出来的,我们也可以把该
组件通过对话框显示出来,不过我感觉还是使用IOS上的模态窗口显示效果比较好,在Flutter中这个窗口叫BottomSheet,它是一种弹出式窗口,从屏幕的最下方弹出
来,我们在前面章回中介绍过该组件。我们将在本章回中介绍如何使用BottomSheet来显示自定义的TimePicker组件。

2. 实现方法

  • 创建一个显示时间的组件,它上面显示的时间就是用户在自定义的TimePicker中选择的时间;
  • 给上一步中创建的时间组件添加事件响应方法,用来响应用户发出的点击事件;
  • 在点击事件中弹出BottomSheet窗口,把自定义的TimePicker组件放到该窗口中;
  • 实现时间选择功能,就是把用户在TimePicker中选择的时间显示到时间组件上;
  • 关闭BottomSheet窗口,可以专门创建一个按钮来关闭或者点击窗口外的区域来关闭;
    上面介绍的方法比较抽象,我们将在后面的小节中通过具体的示例代码来演示。

3. 代码与效果

3.1 示例代码

class _ExCusTimePickerState extends State<ExCusTimePicker> {///这是初始化值,如果用户不选择就用此值lint hour = 8;int minute = 30;String selectedTime = "8:30";Widget build(BuildContext context) {double screenWidth = MediaQuery.of(context).size.width;double screenHeight = MediaQuery.of(context).size.height;return Scaffold(appBar: AppBar(title: const Text("Example of CusTimePicker"),),body:Listener(onPointerDown: (event) {showModalBottomSheet(context: context,builder: (BuildContext context){return Container(width: screenWidth,height: screenHeight*2/3,decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.horizontal(left: Radius.circular(30),right: Radius.circular(30),),),///在这里使用自定义的TimePicker组件child:CusTimePicker(),///显示时间的组件分三行内容child: Align(alignment: Alignment.topCenter,child: Container(alignment: Alignment.center,width: screenWidth - 16*2,height: 96,decoration: BoxDecoration(color: Colors.blue[500],borderRadius: BorderRadius.circular(24),),child: Padding(padding: const EdgeInsets.only(left: 16.0,top: 8,),child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [const Text("SelectedTime: ",style: TextStyle(color: Colors.white),),const SizedBox(height: 16,),Text(selectedTime,style: const TextStyle(fontSize: 24,color: Colors.white),),],),),),),),);}

上面的示例代码完全按照实现方法中的内容来编写,并且在关键位置添加了注释。代码中需要注意的是用户点击事件响应和更新时间的方法。在更新时间时我们使用的是
setState()方法,这样可以实时更新显示时间组件中的时间,不过就是性能低一些。可以把它更新成StreamBuiler的方式来更新,这个就当是我给大家留下的作业。
此外,代码中默认的时间是自定义的,大家可以修改当前的系统时间,这样可以提升用户的操作检验。

3.2 运行效果

编译并且运行上面的程序,可以得到下面的运行效果图,请大家参考:035.图中位于屏幕最上的组件就是显示时间的组件,点击该组件时就会弹出下面的窗口,这个窗口
就是BottomSheet,我们把自定义的TimePicker组件放到了该窗口中,并且在窗口下方添加了一个按钮用来确认选择的时间,点击该按钮后关闭窗口。这个图片是静态
的,大家可以自动动手去实践,这样可以看到容器动态弹出和关闭的过程。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 我们使用单独的组件来显示时间,而且它可以响应用户点击的事件;
  • 用户点击组件后弹出BottomSheet窗口,在该窗口中显示TimePicker组件;
  • 选择完成时间后需要更新组件中显示的日间,并且关闭BottomSheet窗口;
  • 更新时间时可以使用setState()方法,也可以使用StreaBuilder组件;
    看官们,与"自定义TimePicker组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/580682.shtml

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

相关文章

奇富科技跻身国际AI学术顶级会议ICASSP 2024,AI智能感知能力迈入新纪元

近日&#xff0c;2024年IEEE声学、语音与信号处理国际会议ICASSP 2024&#xff08;2024 IEEE International Conference on Acoustics, Speech, and Signal Processing&#xff09;宣布录用奇富科技关于语音情感计算的最新研究成果论文“MS-SENet: Enhancing Speech Emotion Re…

vue中的路由

目录 一、路由基础 路由机制 1.声明路由对象数组 2.创建路由器实例对象 3.将路由器实例注册vue根实例 4.通过router-link标签访问组件 5.路由导航守卫 二、动态路由匹配 响应路由参数的变化/监听路由url地址栏参数变化&#xff1f; 一、路由基础 路由机制 通过路由加载组件…

11.map 容器

11、map 容器 简介&#xff1a; map 中所有元素都是 pairpair 中第一个元素为 key&#xff08;键值&#xff09;&#xff0c;起到索引作用&#xff0c;第二个元素为 value&#xff08;实值&#xff09;所有元素都会根据元素的键值自动排序 本质&#xff1a; map/multimap 属…

如何发送大型文件 ---- 分卷压缩

不知道各位小伙伴有没有这样的烦恼&#xff0c;发送很大很大的压缩包会受到限制&#xff0c;比如QQ邮箱需要付费来进行中转的扩容&#xff0c;下面我将会介绍一种分卷压缩的方法来传送较大的压缩包给对方 使用7-zip软件进行分卷压缩 如果有7-zip压缩软件直接跳过这一步 7-zi…

利用Milvus Cloud和LangChain构建机器人:一种引人入胜且通俗易懂的方法

一、引言 机器人已经深入我们的日常生活&#xff0c;从家庭服务到工业生产&#xff0c;再到医疗和运输等领域。然而&#xff0c;这些机器人往往需要复杂的算法和数据处理技术才能有效地执行任务。在这个过程中&#xff0c;人工智能&#xff08;AI&#xff09;和机器学习&#…

Spring Boot快速搭建一个简易商城项目【一展示商城首页篇】

前言&#xff1a;今天我来使用Spring Boot快速搭建一个简易商城项目以下是相关的思路流程&#xff0c;如果有更好的思路&#xff0c;欢迎大佬评论留言&#xff01;&#xff01;&#xff01; 一&#xff0c;实现思路&#xff1a; 创建 Spring Boot 项目&#xff1a; 使用 Spring…

一种用于解决子图同构问题的子图特定因子

判断两个图是否同构可以从两个方面考虑 当两个图的节点的个数不等时&#xff1a;显然&#xff0c;这两个图是不可能同构。当两个图的节点的个数相等时&#xff1a;此时&#xff0c;需根据邻接矩阵的特征值来进行区分。例&#xff1a;两个图的邻接矩阵分别为 A , A ′ ∈ R n …

Hikvision SPON IP网络对讲广播系统存在命令执行漏洞CVE-2023-6895 附POC软件

免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. Hikvision SPON IP网络对讲广播系统简介 微信公众…

理解文件系统

一 什么是文件系统 文件系统是计算机操作系统中的一个核心组件&#xff0c;用于管理计算机中的文件和文件夹。它提供了一种组织和访问计算机存储设备上数据的方式。文件系统使用户能够创建、修改、删除和查找文件&#xff0c;以及组织文件和文件夹的层次结构。 ps: linux一共有…

全局代理的詳細使用指南(Windows、Mac、Android、iOS)

全局代理IP又稱全局IP代理&#xff0c;允許用戶通過一個代理伺服器來發送和接收互聯網上的資訊。這個代理伺服器會隱藏用戶的真實IP地址&#xff0c;並將其替換為代理伺服器的IP地址。 除了常見的提高網路安全保護和突破地理限制的功能外&#xff0c;全局代理IP還可以做到以下…

C语言例题6

1.以下程序运行后的输出结果是&#xff1a;17。 main() {int x15; while(x>10&&x<50) {x; if (x/3) {x ; break;} else continue;} printf("%d\n",x); } 首先&#xff0c;我们分析程序中的逻辑和操作。 初始化 x 为 15。进入 while 循环&…

【FPGA】高云FPGA之科学的FPGA开发流程

FPGA开发流程 开发流程1、设计定义2、设计输入3、分析和综合4、功能仿真5、布局布线6、时序仿真7、IO分配以及配置文件&#xff08;bit流文件&#xff09;的生成8、配置&#xff08;烧录&#xff09;FPGA9、在线调试 例子1、设计定义1.1 需求1.2 原理图1.3 真值表 2、设计输入2…

HTML 实操试题(一)

创建一个包含标题、段落和链接的基本HTML文档&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><ti…

Docker - 镜像 | 容器 | 数据卷 日常开发常用指令 + 演示(一文通关)

目录 Docker 开发常用指令汇总 辅助命令 docker version docker info docker --help 镜像命令 查看镜像信息 下载镜像 搜索镜像 删除镜像 容器命令 查看运行中的容器 运行容器 停止、启动、重启、暂停、恢复容器 杀死容器 删除容器 查看容器日志 进入容器内部…

软件测试/测试开发丨Pytest学习笔记

Pytest 格式要求 文件: 以 test_ 开头或以 _test 结尾类: 以 Test 开头方法/函数: 以 _test 开头测试类中不可以添加构造函数, 若添加构造函数将导致Pytest无法识别类下的测试方法 断言 与Unittest不同, 在Pytest中我们需要使用python自带的 assert 关键字进行断言 assert…

SpringBoot实用开发(五)-- RedisTemplate处理String类型的数据

目录 1. 新增操作 2. 查看操作 3. 批量获取value值 4. 返回value的长度 5.

中介者模式-Mediator Pattern-1

如果在一个系统中对象之间的联系呈现为网状结构&#xff0c; 对象之间存在大量的多对多联系&#xff0c;将导致系统非常复杂。 这些对象既会影响别的对象&#xff0c;也会被别的对象所影响。 这些对象称为同事对象&#xff0c;它们之间通过彼此的相互作用实现系统的行为。 在网…

找不到msvcp140.dll怎么办-msvcp140.dll丢失的解决方法分享

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp140.dll丢失”。那么&#xff0c;msvcp140.dll究竟是什么文件&#xff1f;为什么会出现丢失的情况&#xff1f;本文将详细介绍msvcp140.dll的属性、作用以及丢失的原因&#xff0c;并…

Java学习笔记(八)——面向对象编程(高级)

目录 一、类变量和类方法 &#xff08;一&#xff09;类变量/静态变量 类变量内存布局 类变量使用注意事项和细节 &#xff08;二&#xff09;类方法 类方法经典的使用场景 类方法使用注意事项和细节 二、理解main方法语法 三、代码块 代码块使用注意事项和细节 四、…