鸿蒙HarmonyOS开发生日选择弹框

鸿蒙HarmonyOS开发生日选择弹框

生日选择弹框和城市选择弹框差不多,都是通过观察上一个数据变化来设置自己的数据

一、思路:

一个弹框上建三个compoent,一个年,一个月,一个日。日的数据是根据年和月进行变化的

二、效果图:

在这里插入图片描述

三、视频效果:

鸿蒙Next开发教程实战案例源码分享-生日选择弹框

四、关键源码如下:
// 联系:893151960
@Component
export struct FirstLevelComponent {@State labelList: string[] = [];@Consume selectFirstIndex: number;@Consume currentFirst: string;@Consume dataSource: string[];aboutToAppear() {for (let i = 0; i < this.dataSource.length; i++) {this.labelList.push(this.dataSource[i])if (this.dataSource[i] === this.currentFirst) {this.selectFirstIndex = i;}}this.currentFirst = this.dataSource[this.selectFirstIndex]}build() {Column() {Column() {if (this.labelList.length === 0) {Text('暂无数据').fontSize(20)} else {TextPicker({ range: this.labelList, selected: this.selectFirstIndex }).onChange((value: string|string[], index: number|number[]) => {if (typeof index === 'number') {this.selectFirstIndex = indexthis.currentFirst = this.dataSource[index]}}).selectedTextStyle({color:$r('app.color.color_main')}).canLoop(false)}}.backgroundColor(Color.White).border({ color: '#e2e2e2', width: { right: 0.5 }}).width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)}.height('100%')}
}
/*** @author :congge* @date : 2024-01-24 11:45* @desc : 生日选择专用弹框**/
@CustomDialog
export default struct BirthdayPickerDialog {@Provide currentFirst: string = '';@Provide currentSecond: string = '';@Provide currentThree: string = '';@Provide selectFirstIndex: number = 0;//注意; 这位置很可能和数组的位置对不上的,因为它的起点是以为左边选中开始的@Provide selectSecondIndex: number = 0;controller: CustomDialogControllertitle: string = '选择生日' //弹窗的提示文本@Provide dataSource: string[] = CommonConstants.YEAR@Provide secondOnlyDataSource: string[] = CommonConstants.MONTHresultCallback?:(arg0:string,arg1:string,arg2:string) => voidaboutToAppear() {this.currentFirst = this.dataSource[0];this.currentSecond = this.secondOnlyDataSource[0];}build() {Column() {Text(this.title).fontSize(20).textAlign(TextAlign.Center).margin({ top: 10, bottom: 10 });Row() {FirstLevelComponent().width('33%');// 手动给线Divider().vertical(true).color($r('app.color.color_e2')).width(0.5)SecondOnlyLevelComponent().width('33%');Divider().vertical(true).color($r('app.color.color_e2')).width(0.5)DayLevelComponent().width('33%');}.height('40%')Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {Button($r('app.string.cancel'), { type: ButtonType.Normal }).onClick(() => {this.controller?.close()}).backgroundColor(0xffffff).fontColor(Color.Black).layoutWeight(1).height('100%')Divider().vertical(true).strokeWidth(1).color('#F1F3F5').opacity(1).height('100%')Button($r('app.string.sure'), { type: ButtonType.Normal }).onClick(() => {this.controller?.close()this.resultCallback?.(this.currentFirst,this.currentSecond,this.currentThree)}).backgroundColor(0xffffff).fontColor($r('app.color.color_main')).layoutWeight(1).height('100%')}.height(50)}}
}
五、完整项目demo结构图:

在这里插入图片描述有需要完整源码demo可私信我

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

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

相关文章

浏览器内核版本更新:Chrome 130✔

SunBrowser 内核版本更新至 Chrome 130&#xff0c;UA 同步更新至 130。 如何更新浏览器内核版本&#xff1f; 本地设置更新 在 AdsPower 客户端点击右上角的[设置]&#xff0c;再点击[本地设置]&#xff0c;下滑找到版本信息&#xff0c;选中需要的内核版本立即下载。 新建浏…

【实践】某央企研究院如何打造IT监控告警平台?

01客户简介&#xff1a; 案例客户为某央企下属研究院。 02痛点分析&#xff1a; 随着信创国产化持续推进&#xff0c;案例客户已完成部分IT核心系统的替代&#xff0c;部署了一系列国产软硬件设施&#xff0c;如Kylinv10操作系统、融智通网络设备等。由于信创生态不够成熟&a…

SpringBoot在线教育系统:集成第三方服务

5系统详细实现 5.1 普通管理员管理 管理员可以对普通管理员账号信息进行添加修改删除操作。具体界面的展示如图5.1所示。 图5.1 普通管理员管理界面 5.2 课程管理员管理 管理员可以对课程管理员进行添加修改删除操作。具体界面如图5.2所示。 图5.2 课程管理员管理界面 5.3 …

vscode | 开发神器vscode快捷键删除和恢复

目录 快捷键不好使了删除快捷键恢复删除的快捷键 在vscode使用的过程中&#xff0c;随着我们自身需求的不断变化&#xff0c;安装的插件将会持续增长&#xff0c;那么随之而来的就会带来一个问题&#xff1a;插件的快捷键重复。快捷键重复导致的问题就是快捷键不好使了&#xf…

C++优选算法九 链表

一、常用技巧 画图&#xff01;直观形象&#xff0c;便于理解。引入虚拟“头”结点。不吝啬空间。快慢双指针&#xff1a; 判环 找链表中环的入口 找链表中倒数第n个结点 二、常用操作 创建一个新结点尾插头插 三、示例题目 1.两数相加. - 力扣&#xff08…

计算机网络:网络层 —— 虚拟专用网 VPN

文章目录 虚拟专用网 VPN 概述内联网 VPN外联网 VPN 虚拟专用网 VPN 概述 虚拟专用网&#xff08;Virtual Private Network&#xff0c;VPN&#xff09;&#xff1a;利用公用的因特网作为本机构各专用网之间的通信载体&#xff0c;这样形成的网络又称为虚拟专用网。 出于安全…

Web 安全基础知识梳理大全,零基础入门到精通,收藏这篇就够了

一、各种linux虚拟机忘记密码 1、红帽忘记密码修改root密码 1 在重启的时候 e 进入 2 在linux16 后面找到UTF-8 在后面加 rd.break 然后ctrlx 3 这时候可以输入mount 看一下 会发现根为 /sysroot/ 没有w权限&#xff0c;只有ro权限 4 输入 mount -o remount,r…

非凸科技助力第49届ICPC亚洲区域赛(成都)成功举办

10月26日-27日&#xff0c;由电子科技大学承办、非凸科技与华为共同支持的第49届ICPC国际大学生程序设计竞赛亚洲区域赛&#xff08;成都&#xff09;在郫都区体育中心体育馆顺利举行。非凸科技期待与产学研各界专家、青年才俊一起&#xff0c;推动基础科学理论研究的重大突破&…

ssm051网上医院预约挂号系统+jsp(论文+源码)_kaic

本科毕业设计论文 题目&#xff1a;网上医院预约挂号系统设计与实现 系 别&#xff1a; XX系&#xff08;全称&#xff09; 专 业&#xff1a; 软件工程 班 级&#xff1a; 软件工程15201 学生姓名&#xff1a; 学生学号&#xff1a; 指导教师&#xff1a…

EtherCAT转ModbusTCP相关技术

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 MS-GW15 概述 MS-GW15 是 EtherCAT 和 Modbus TCP 协议转换网关&#xff0c;为用户提供一种 PLC 扩展的集成解决方案&#xff0c;可以轻松容易将 Modbu…

qt QTextStream详解

1、概述 QTextStream类是Qt框架中用于处理文本输入输出的类。它提供了一种方便的方式&#xff0c;可以从各种QIODevice&#xff08;如QFile、QBuffer、QTcpSocket等&#xff09;中读取文本数据&#xff0c;或者将文本数据写入这些设备中。QTextStream能够自动处理字符编码的转…

大数据-201 数据挖掘 机器学习理论 - 决策树 局部最优 剪枝 分裂 二叉分裂

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

项目_Linux_网络编程_私人云盘

概述 项目功能总述&#xff1a; 该项目使用TCP进行通信&#xff0c;实现文件的上传和下载。云盘的文件同步有手动同步、实时同步、定时同步这三种。本项目主要实现的是手动同步的功能&#xff0c;重点训练在如何使用TCP进行文件传输。 选择TCP的原因&#xff1a; 文件的传输…

细腻的链接:C++ list 之美的解读

细腻的链接&#xff1a;C list 之美的解读 前言&#xff1a; 小编在前几日刚写过关于vector容器的内容&#xff0c;现在小编list容器也学了一大部分了&#xff0c;小编先提前说一下学这部分的感悟&#xff0c;这个部分是我学C以来第一次感到有难度的地方&#xff0c;特别是在…

Java之包,抽象类,接口

目录 包 导入包 静态导入 将类放入包 常见的系统包 抽象类 语法规则 注意事项&#xff1a; 抽象类的作用 接口 实现多个接口 接口间的继承 接口使用实例 &#xff08;法一&#xff09;实现Comparable接口的compareTo()方法 &#xff08;法二&#xff09;实现Comp…

qt QDragEnterEvent详解

1、概述 QDragEnterEvent是Qt框架中用于处理拖放进入事件的一个类。当用户将一个拖拽对象&#xff08;如文件、文本或其他数据&#xff09;拖动到支持拖放操作的窗口部件&#xff08;widget&#xff09;上时&#xff0c;系统会触发QDragEnterEvent事件。这个类允许开发者在拖拽…

永恒之蓝漏洞复现

永恒之蓝漏洞复现 1 实验准备 1台靶机 win7 关闭防火墙 控制面板->系统和安全->Windows 防火墙 192.168.184.131 1台攻击者 kali 192.168.184.129 2 实施攻击 kali操作 1.输入msfconsole回车 2.搜索ms17_010模块 msf6 > search ms17_010 3.选择编号为3的模块 use 3…

c++拷贝构造函数

1.拷贝构造函数 拷贝构造函数的调用时机 class A { public://默认构造函数A(){m_Hp 100;cout << "A默认构造函数调用完毕" << endl;}//有参构造函数A(int hp){m_Hp hp;cout << "A有参构造函数调用完毕" << endl;}A(const A&…

排序算法的分类、时间空间复杂度

排序是计算机科学和数学中的基本操作&#xff0c;有多种不同的方式&#xff0c;每种方式都有其特定的时间复杂度和空间复杂度。以下是对排序方式的分类及其时间复杂度和空间复杂度的详细分析&#xff1a; 一、排序方式的分类 排序方式主要分为两大类&#xff1a;比较排序和非…

【MMAN-M2】基于缺失模态编码器的多多头关注网络

abstract&#xff1a; 多模态融合是多模态学习领域的研究热点。以往的多模态融合任务大多是基于完整模态的。现有的缺失多模态融合研究没有考虑模态的随机缺失&#xff0c;缺乏鲁棒性。大多数方法都是基于缺失模态和非缺失模态之间的相关性&#xff0c;而忽略了缺失模态的语境…