鸿蒙开发（27）案例今日任务

案例为纯前端实现，总结案例。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

主页面代码

import { TaskStatisties } from '../view/TaskStatisties'
import { TaskItem } from '../view/TaskItem'
import CreateTaskModel, {TaskModel} from '../viewmodel/TaskModel'
import { router } from '@kit.ArkUI'// xxx.ets
@Entry
@Component
struct TaskList {@StorageLink("tasks") tasks:Array<TaskModel> = []@StorageLink('PropA') storageLink:number = 0aboutToAppear(): void {const tasks = CreateTaskModel.initData()this.tasks = tasks}build() {Stack({alignContent:Alignment.BottomEnd}){//主轴垂直，侧轴水平Column() {/*** 第一个模块：头部**/Text("你好， 小王").fontSize(30).fontWeight(FontWeight.Bold)// 颜色可以允许:英文单词、16进制、rgb、枚举.fontColor($r('app.color.text_color'))Text("让每天的工作效率他提高").fontSize(14).fontColor(Color.Gray).margin({top:14})Scroll(){Column(){Text("我的计划").fontSize(26).fontWeight(FontWeight.Bold)// 颜色可以允许:英文单词、16进制、rgb、枚举.margin({top:30})/*** 第二个模块：显示模块列表**/TaskStatisties({tasks:this.tasks})/*** 第三个模块：当天任务列表**/Column(){Row(){Text("今日任务").fontSize(26).fontWeight(FontWeight.Bold)Text("查看更多").fontSize(14)}.width('100%').justifyContent(FlexAlign.SpaceBetween).margin({top:20})//任务列表TaskItem({tasks:this.tasks})}}.alignItems(HorizontalAlign.Start).padding({bottom:70})}.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)}.height('100%').alignItems(HorizontalAlign.Start).backgroundColor('#f1f3f5').padding(10)Stack(){Image($r('app.media.bg_jia')).width(40)Image($r('app.media.jia')).width(20)}.margin({bottom:100,right:30}).onClick(()=>{router.pushUrl({url:"pages/Page05_AddTask",},router.RouterMode.Standard,(err)=>{if(err){console.log("路由跳转出错了!")}})})}}
}

添加页面

import { formatDate,transformHoursAndMinutes } from "../utils/DateFormat"
import  {TaskModel} from '../viewmodel/TaskModel'
import { router } from "@kit.ArkUI"@Extend(Text) function textStyles() {.fontSize(16).fontColor($r("app.color.add_title_color")).margin({bottom:10}).width("100%")
}
@Extend(TextInput) function inputStyles() {.borderRadius(0).backgroundColor("#f1f3f5").placeholderColor($r("app.color.text_color"))
}@Extend(Line) function lineStyles(value:string="100%") {.width(value).height(1).backgroundColor("#cccccc")
}@Extend(Radio) function radioStyles() {.width(24).height(24).radioStyle({checkedBackgroundColor:"#5B67CA"})
}@Entry
@Component
struct Page05_AddTask {@StorageLink("tasks") tasks:Array<TaskModel> = []@State message:string = "Hello World"private selectedDate:Date = new Date()@State currentState:number = 0@State taskName:string = ""@State taskTime:string = ""@State taskMsg:string = ""@State taskBeginDate:string = ""@State taskEndDate:string = ""@State taskType:number = 1 //1,个人任务 2,工作任务@State taskTitle:number = 1 //任务标签学习，生活，娱乐@State taskStatus:string="" //任务状态：done完成 undone未完成 doing正在进行 futrue未来任务calendarChange = () =>{CalendarPickerDialog.show({selected:this.selectedDate,onAccept:(value)=>{this.taskTime = formatDate(value.getTime(),"yyyy-mm-dd")console.log("CalendarPickerDialog:"+this.taskTime)}})}timePickerChange =(type:string)=>{TimePickerDialog.show({selected:this.selectedDate,useMilitaryTime:true,//24小时disappearTextStyle:{color:Color.Red,font:{size:15,weight:FontWeight.Bold}},textStyle:{color:Color.Green},selectedTextStyle:{color:Color.Orange,font:{size:18,weight:FontWeight.Bold}},onAccept:(value:TimePickerResult)=>{const hour = transformHoursAndMinutes(value.hour)const minute = transformHoursAndMinutes(value.minute)const time = `${hour}:${minute}`if(type === "begin") {this.taskBeginDate = time}else {this.taskEndDate = time}}})}@Builder creatTaskTitle (taskTitle:number,taskTitleTxt:string,color:string) {Column(){Text(taskTitleTxt).fontSize(18).fontColor(Color.White)}.width(60).height(30).backgroundColor(color).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).border({width:this.taskTitle==taskTitle?2:0,color:Color.Red}).margin({right:20}).onClick(()=>{this.taskTitle = taskTitle})}build() {Column(){//标题模块Text("新建任务").fontSize(26).fontWeight(FontWeight.Bold).fontColor($r("app.color.text_color")).margin({bottom:20})//存放页面的主题内容Column({space:20}){Column(){Text("标题").textStyles()TextInput({placeholder:"请输入任务的名字",text:$$this.taskName}).inputStyles()Line().lineStyles()}//日期Column(){Text("日期").textStyles()TextInput({placeholder:"请输入日期",text:$$this.taskTime}).inputStyles().onClick(this.calendarChange)Line().lineStyles()}//s时间Column(){Text("时间").textStyles()Row(){Column(){TextInput({placeholder:"请开始日期",text:$$this.taskBeginDate}).inputStyles().onClick(()=>this.timePickerChange("begin"))Line().lineStyles("90%")}.width("48%")Column(){TextInput({placeholder:"请结束日期",text:$$this.taskEndDate}).inputStyles().onClick(()=>this.timePickerChange("end"))Line().lineStyles("90%")}.width("48%")}}//描述Column(){Text("描述").textStyles()TextInput({placeholder:"请输入任务详情",text:$$this.taskMsg}).inputStyles()Line().lineStyles()}//类型Column(){Text("类型").textStyles()Row(){Row(){Radio({value:"1",group:"type"}).width(24).height(24).radioStyle({checkedBackgroundColor:"#5867CA"}).onChange((isChecked:boolean)=>{if (isChecked) {this.taskType = 1}}).checked(true)Text("个人任务").fontColor("#10275A").fontWeight(FontWeight.Bold)}Row(){Radio({value:"2",group:"type"}).width(24).height(24).radioStyle({checkedBackgroundColor:"#5867CA"}).onChange((isChecked:boolean)=>{if (isChecked) {this.taskType = 2}})Text("工作任务").fontColor("#10275A").fontWeight(FontWeight.Bold)}}.width("100%").justifyContent(FlexAlign.SpaceBetween)}//标签啊Column(){Text("标签").textStyles()Row(){this.creatTaskTitle(1,'学习',"#FD9D9E")this.creatTaskTitle(2,'生活',"#D79FDC")this.creatTaskTitle(3,'娱乐',"#C0EDCE")}.width("100%")}.width("100%").alignItems(HorizontalAlign.Start)//创建任务Column(){Text("创建任务").fontColor(Color.White).fontWeight(FontWeight.Bold)}.width(200).height(40).backgroundColor($r("app.color.text_color")).borderRadius(10).margin({top:20}).justifyContent(FlexAlign.Center).onClick(()=>{const id = new Date().getTime()const temp = new TaskModel(id.toString(),this.taskName,this.taskTime ,this.taskMsg,this.taskBeginDate,this.taskEndDate,this.taskType,this.taskTitle,)this.tasks.push(temp)router.back()})}}.width("100%").height("100%").padding(10).backgroundColor($r("app.color.page_bg_color"))}
}

任务详情

import { router } from '@kit.ArkUI'
import {TaskModel} from '../viewmodel/TaskModel'
class PramsType<T>{value:Tconstructor(value:T) {this.value = value}
}
@Entry
@Component
struct Page05_AddTask {@State taskDetail:TaskModel | null = null@StorageLink("tasks") tasks:TaskModel[] = []@State taskTitle:string = ""@State index:number = 0aboutToAppear(): void {const params = router.getParams()const taskDetail = (params as PramsType<TaskModel>).valuethis.taskDetail = taskDetailconst taskTitle = this.taskDetail.taskTitleswitch (taskTitle) {case 1:this.taskTitle = "学习"break;case 2:this.taskTitle = "生活"break;case 3:this.taskTitle = "娱乐"break;}this.index = this.tasks.findIndex((item:TaskModel)=>taskDetail.id==item.id)}@Styles taskBoxStyle(){.width("49%").height(80).linearGradient({angle:180,//默认按照180度的角度渲染colors:[["#FE9D9D",0.0],//第一个颜色值，第二个代表颜色范围['#FE77D7D',1.0]]}).borderRadius(10).padding(10)}build() {Column({space:20}){//返回按钮和标题Row(){Text("返回").width(50).height(40).backgroundColor(Color.White).textAlign(TextAlign.Center).borderRadius(10).onClick(()=>{router.replaceUrl({url:"pages/Page02_TaskList"})})Text("任务详情").fontSize(20).fontWeight(FontWeight.Bold).fontColor($r("app.color.text_color"))}.width("100%").justifyContent(FlexAlign.SpaceBetween)//任务名称Column({space:20}){Text(`${this.taskDetail?.taskName}`).fontSize(18).fontColor($r("app.color.text_color")).width("100%")Text(this.taskTitle).fontSize(16).fontColor(Color.Gray).width("100%")}//任务时间Row(){Column({space:10}){Text("开始时间").fontSize(20).fontColor("rgba(255,255,255,0.5)").fontWeight(FontWeight.Bold)Text(`${this.taskDetail?.taskBeginDate}`).fontSize(20).fontColor(Color.White).fontWeight(FontWeight.Bold)}.taskBoxStyle().alignItems(HorizontalAlign.Start)Column({space:10}){Text("开始时间").fontSize(20).fontColor("rgba(255,255,255,0.5)").fontWeight(FontWeight.Bold)Text(`${this.taskDetail?.taskEndDate}`).fontSize(20).fontColor(Color.White).fontWeight(FontWeight.Bold)}.taskBoxStyle().alignItems(HorizontalAlign.Start)}.width("100%").justifyContent(FlexAlign.SpaceBetween)//任务状态切换Column({space:20}){Text("任务状态").fontSize(20).fontColor($r("app.color.text_color")).fontWeight(FontWeight.Bold)Toggle({type:ToggleType.Switch,isOn:this.taskDetail?.taskStatus=="done"?true:false}).selectedColor(Color.Orange).onChange((value)=>{this.taskDetail = this.taskDetail as TaskModelif (value) {this.taskDetail.taskStatus = "done"}else {this.taskDetail.taskStatus = "doing"}this.tasks.splice(this.index,1,this.taskDetail)})Row(){Image($r('app.media.list_icon2')).width(30)Text(`${this.taskDetail?.taskStatus=="done"?"已完成":"进行中，滑动修改状态"}`).fontWeight(FontWeight.Bold)}}.width("100%").alignItems(HorizontalAlign.Start)//任务标签Column({space:20}){Text("任务标签").fontSize(20).fontColor($r("app.color.text_color")).fontWeight(FontWeight.Bold)Row(){Text(`${this.taskDetail?.taskType==1?"个人":"工作"}`).fontColor("#FD9D9E").fontWeight(FontWeight.Bold)}.width(80).height(30).justifyContent(FlexAlign.Center).backgroundColor("rgba(253,157,158,0.1)")}.width("100%").alignItems(HorizontalAlign.Start)}.width("100%").height("100%").padding(10).backgroundColor($r("app.color.page_bg_color"))}
}

git地址:案例今日任务

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

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

相关文章

WPF编程excel表格操作

WPF编程excel表格操作

WPF编程excel表格操作 摘要NPOI安装封装代码测试代码 摘要 Excel操作几种方式 使用开源库NPOI(常用&#xff0c;操作丰富)使用Microsoft.Office.Interop.Excel COM组件(兼容性问题)使用OpenXml(效率高)使用OleDb(过时) NPOI安装 封装代码 using System; using System.IO; u…
阅读更多...
音视频采集推流时间戳记录方案

音视频采集推流时间戳记录方案

音视频同步更多文章 深入理解音视频pts&#xff0c;dts&#xff0c;time_base以及时间数学公式_视频pts计算-CSDN博客 ffplay音视频同步分析_ffplay 音视频同步-CSDN博客 音视频采集打时间戳设计 实时音视频数据的采集和处理场景。具体来说: 采集阶段: 在音视频数据采集过…
阅读更多...
专业140+总分410+南京大学851信号与系统考研经验南大电子信息通信集成电路，真题，大纲。参考书。

专业140+总分410+南京大学851信号与系统考研经验南大电子信息通信集成电路，真题，大纲。参考书。

本人本科中等211&#xff0c;离保送本校差一点&#xff0c;考研前纠结本校还是追求更高目标&#xff0c;和家人聊了自己的想法&#xff0c;感谢父母对我的支持&#xff0c;坚定报考南大的目标&#xff0c;最终专业851信号与系统140&#xff0c;总分410顺利被南京大学录取&#…
阅读更多...
【C++】初识C++之C语言加入光荣的进化（上）

【C++】初识C++之C语言加入光荣的进化（上）

写在前面 本篇笔记作为C的开篇笔记&#xff0c;主要是讲解C关键字(C98)连带一点点(C11)的知识。掌握的C新语法新特性&#xff0c;当然C是兼容C的&#xff0c;我们学习C的那套在C中也是受用。 ps:点我跳转下集 文章目录 写在前面一、命名空间域1.1、命名空间域的定义与使用1.2…
阅读更多...
CGAL windows 安装教程

CGAL windows 安装教程

1.下载源代码 CGAL官网下载https://github.com/CGAL/cgal/releases 2.下载boost库 BOOST官网下载https://www.boost.org/ 3.下载 GMP and MPFR 4.配置VS2022 头文件&#xff1a; 库路径 做完以上步骤&#xff0c;可以使用CGAL了&#xff01;
阅读更多...
从0入门自主空中机器人-2-2【无人机硬件选型-PX4篇】

从0入门自主空中机器人-2-2【无人机硬件选型-PX4篇】

1. 常用资料以及官方网站 无人机飞控PX4用户使用手册&#xff08;无人机基本设置、地面站使用教程、软硬件搭建等&#xff09;&#xff1a;https://docs.px4.io/main/en/ PX4固件开源地址&#xff1a;https://github.com/PX4/PX4-Autopilot 飞控硬件、数传模块、GPS、分电板等…
阅读更多...
GraphRAG 框架哪家强？选择最适合你智能问答系统的框架

GraphRAG 框架哪家强？选择最适合你智能问答系统的框架

GraphRAG 框架哪家强&#xff1f;选择最适合你智能问答系统的框架 点击进入&#xff1a;GraphRAG系列文章-Nano-GraphRAG&#xff1a;打造轻量级医疗诊断助手 点击进入&#xff1a;GraphRAG系列文章-突破传统知识管理瓶颈&#xff1a;LlamaIndex GraphRAG 让企业知识问答更智能…
阅读更多...
Mac电脑python多版本环境安装与切换

Mac电脑python多版本环境安装与切换

我当前是python3.9.6环境&#xff0c;需要使用3.9.8环境&#xff0c;通过brew安装3.9.8版本&#xff0c;然后通过pyenv切换环境 步骤 1: 安装 pyenv brew install pyenv brew install pyenv-virtualenv 步骤 2: 安装 Python 3.9.8&#xff08;使用 pyenv 安装指定版本的 Pyth…
阅读更多...
Redis--持久化策略（AOF与RDB）

Redis--持久化策略（AOF与RDB）

持久化策略&#xff08;AOF与RDB&#xff09; 持久化Redis如何实现数据不丢失&#xff1f;RDB 快照是如何实现的呢&#xff1f;执行时机RDB原理执行快照时&#xff0c;数据能被修改吗&#xff1f; AOF持久化是怎么实现的&#xff1f;AOF原理三种写回策略AOF重写机制 RDB和AOF合…
阅读更多...
C高级：思维导图Day2

C高级：思维导图Day2

目录 总览1 总览2 总览1 压缩与解压缩 打包与解包 软连接与硬链接 ubuntu下关机与重启指令 总览2 结束
阅读更多...
权限获得第一步

权限获得第一步

权限获得第一步 下载打开附件 给了一串加密的密文 一般都是用MD5加密&#xff0c;每一段分别解码一下 第一段不行&#xff0c;试一下第二段 这里发现第二段可以解码出来&#xff0c;这应该就是密码了 flag{3617656}
阅读更多...
001__VMware软件和ubuntu系统安装(镜像)

001__VMware软件和ubuntu系统安装(镜像)

[ 基本难度系数 ]:★☆☆☆☆ 一、Vmware软件和Ubuntu系统说明&#xff1a; a、Vmware软件的说明&#xff1a; 官网&#xff1a; 历史版本&#xff1a; 如何下载&#xff1f; b、Ubuntu系统的说明&#xff1a; 4、linux系统的其他版本&#xff1a;红旗(redhat)、dibian、cent…
阅读更多...
fiscoBcos中webase平台导出java项目

fiscoBcos中webase平台导出java项目

导出合约为java项目并调用 1&#xff0e; 在webase管理平台上面进行项目的导出 2.将下载好的项目解压并用idea打开&#xff0c;目录结构如下 在resources目录下的abi放的是编译过后的合约方法&#xff0c;bin.ecc放的是以编译过后的智能合约&#xff0c;conf文件夹下面放的是链…
阅读更多...
【嵌入式C语言】指针数组结构体

【嵌入式C语言】指针数组结构体

指针与数组 指针与数组指针数组数组指针 多维数组数组名的保存 结构体定义结构体定义结构体变量使用typedef简化结构体声明访问结构体成员结构体内存分配字节对齐位域定义位域位域的限制示例 指针与数组 指针数组和数组指针是两个不同的概念&#xff0c;它们涉及到指针和数组的…
阅读更多...
Junit4单元测试快速上手

Junit4单元测试快速上手

文章目录 POM依赖引入业务层测试代码Web层测试代码生成测试类文件 在工作中我用的最多的单元测试框架是Junit4。通常在写DAO、Service、Web层代码的时候都会进行单元测试&#xff0c;方便后续编码&#xff0c;前端甩锅。 POM依赖引入 <dependency><groupId>org.spr…
阅读更多...
【优选算法】查找总价格为目标值的两个商品（双指针）

【优选算法】查找总价格为目标值的两个商品（双指针）

算法_云边有个稻草人的博客-CSDN博客 目录 解法一&#xff1a;暴力算法 解法二&#xff1a;双指针(时间复杂度为O&#xff08;N&#xff09;) 【代码编写】 LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 解法一&#xff1a;暴力算法 用…
阅读更多...
时空信息平台-API安全措施-下篇：登录鉴权【访问受限】您的请求已被该站点的安全策略拦截。

时空信息平台-API安全措施-下篇：登录鉴权【访问受限】您的请求已被该站点的安全策略拦截。

文章目录 引言I 登录鉴权处理逻辑校验顺序用户状态校验密码校验Token鉴权短信验证码/图形验证码登录设备限制II 服务端发生错误的处理业务返回码处理前端处理业务返回码nginx处理http状态码引言 时空信息平台-API安全措施：上篇（通讯协议的安全措施） https://blog.csdn.net/z…
阅读更多...
编译openssl遇到错误Parse errors: No plan found in TAP output的解决方法

编译openssl遇到错误Parse errors: No plan found in TAP output的解决方法

在编译openssl时 tar -zxvf openssl-1.1.1p.tar.gz cd openssl-1.1.1p ./config --prefix/usr --openssldir/etc/ssl --shared zlib make make test 遇到错误 Parse errors: No plan found in TAP output 解决方法&#xff1a; yum install perl-Test-Simple
阅读更多...
【Linux】进度条

【Linux】进度条

本文中&#xff0c;我们来写一个进度条。 本文大纲&#xff1a; 写一个命令行版的进度条。 1.回车换行 2.缓冲区问题&#xff08;本文不深究&#xff09; ​ 2.1测试代码 3.写一个什么样的进度条&#xff1f; ​ version1 ​ version2 回车换行 这俩不是一个概念&…
阅读更多...
UE5材质节点SimpleGrassWind

UE5材质节点SimpleGrassWind

SimpleGrassWind节点可以模拟树叶扰动&#xff0c;或小草晃动效果 用来做风格化树、风格化草效果很好 主要节点 前三个节点分别用来控制&#xff0c;风强度&#xff0c;风重力&#xff0c;风速度&#xff0c;WPO是世界位置偏移
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023