【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(九)
课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发
(本篇笔记对应课程第 16 节)
P16《15.ArkUI-状态管理-任务统计案例》





1、实现任务进度卡片

怎么让进度条和进度展示文本堆叠展示?需要一个新的布局容器:Stack


2、实现新增任务按钮

3、实现任务列表渲染:


将更新任务总数量与已完成数量的逻辑封装为一个方法,在新增任务与勾选/取消勾选时都调用这个方法:



4、实现左滑显示删除按钮功能:
首先用 List 与 ListItem 改善任务列表:

**要实现左滑显示删除按钮功能,需要 ListItem 的属性 swipeAction 实现:其对应的参数是一个自定义构建函数。**强烈建议这个自定义构建函数定义为局部的,因为删除某一个任务时需要操作任务数组:




实践:
class Task {static id:number = 1// 任务名称name:string = `任务${Task.id++}`// 任务状态:是否完成finished:boolean = false
}@Styles function cardStyle(){.width('100%').height(120).padding(10).backgroundColor('#fff').borderRadius(8)
}@Entry
@Component
struct Index {// 总任务数量@State totalTask:number = 0// 已完成任务数量@State finishTask:number = 0// 任务列表@State tasks:Task[] = []handleTaskChange(){// 更新任务总数量this.totalTask = this.tasks.length// 更新已完成任务数量this.finishTask = this.tasks.filter(item => item.finished).length}build() {Row() {Column() {// 1、任务进度卡片Row(){Text('任务进度:').fontSize(22).fontWeight(FontWeight.Bold)Stack(){Progress({value : this.finishTask,total : this.totalTask,type : ProgressType.Ring})Row(){Text(this.finishTask.toString())Text(`/${this.totalTask.toString()}`)}}}.cardStyle().justifyContent(FlexAlign.SpaceEvenly)// 2、新增任务按钮Button('新增任务').width(200).margin({top:20, bottom:20}).onClick(()=>{// 新增任务this.tasks.push(new Task())// 更新任务总数量// this.totalTask = this.tasks.lengththis.handleTaskChange()})// 3、任务列表展示List(){ForEach(this.tasks,(item:Task,index)=>{ListItem(){Row(){Text(item.name)Checkbox().select(item.finished).onChange(val => {// 更新任务状态item.finished = val// 更新已完成任务数量// this.finishTask = this.tasks.filter(item => item.finished).lengththis.handleTaskChange()})}.cardStyle().height(60).margin({bottom:10}).justifyContent(FlexAlign.SpaceBetween)}.swipeAction({ end: this.deleteBtn(index)})})}.layoutWeight(1)}.width('100%').height('100%').justifyContent(FlexAlign.Start)}.height('100%').width('100%').padding({top:20,bottom :20, left:10,right:10}).backgroundColor('#efefef')}@Builder deleteBtn(index){Button(){Image($r('app.media.icon_delete')).width(30).fillColor(Color.Red)}.width(40).height(40).type(ButtonType.Circle).backgroundColor(Color.Red).margin(6).onClick(() => {this.tasks.splice(index,1)this.handleTaskChange()})}
}
相关文章:
【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(九)
课程地址: 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发 (本篇笔记对应课程第 16 节) P16《15.ArkUI-状态管理-任务统计案例》 1、实现任务进度卡片 怎么让进度条和进度展示文本堆叠展示࿱…...
海山数据库(He3DB)数据仓库发展历史与架构演进:(一)传统数仓
从1990年代Bill Inmon提出数据仓库概念后经过四十多的发展,经历了早期的PC时代、互联网时代、移动互联网时代再到当前的云计算时代,但是数据仓库的构建目标基本没有变化,都是为了支持企业或者用户的决策分析,包括运营报表、企业营…...
简单快捷的图片格式转换工具:认识webp2jpg-online
经常写博客或记笔记的朋友们可能会碰到图床不支持的图片格式或图片太大需要压缩的情况。通常,我们会在浏览器中搜索在线图片格式转换器,但这些转换器往往伴有烦人的广告或要求登录,并且支持的转换格式有限。最近,我在浏览 GitHub …...
iptablese防火墙【SNAT和DNAT】
目录 1.SNAT策略及应用 1.1SNAT原理与应用 1.2 SNAT策略的工作原理 1.3 实验操练 2.DNAT策略 2.1 DNAT策略的概述 2.2 DNAT原理与应用 2.3 实验操练 1.SNAT策略及应用 1.1SNAT原理与应用 SNAT 应用环境:局域网主机共享单个公网IP地址接入Internet…...
IT行业现状与未来趋势
随着技术的不断进步,IT行业已成为推动全球经济和社会发展的关键力量。从云计算、大数据、人工智能到物联网、5G通信和区块链,这些技术正在重塑我们的生活和工作方式。你眼中IT行业的现状及未来发展趋势是怎么样的?无论您是行业领袖、技术专家…...
Snowy2.x 版本使用 Yaml
代码:https://gitee.com/xiaonuobase/snowy/tree/Snowy2.5.2/ 直接将 properties 转换成 yaml 那么你大概率会遇到下面报错: 然后你上网搜索,发现是 snakeyaml 版本的问题,1.x 版本的 snakeyaml 有安全隐患,要升级到…...
鸿蒙 DevEcoStudio:通知栏通知实现
【使用notificationManager实现通知栏功能】 【普通通知、长文本通知、多行通知、图片通知】 import notificationManager from ohos.notificationManager import image from ohos.multimedia.image Entry Component struct Index {State message: string Hello World// 将图…...
什么是网关鉴权及其在Spring Cloud Gateway中的实现
在现代微服务架构中,网关扮演着非常重要的角色,它是系统和外部世界之间的入口,负责路由请求、流量控制以及安全保护等任务。其中,网关鉴权是保障系统安全的重要环节之一。本文将深入介绍什么是网关鉴权,以及如何通过过…...
【机器学习与实现】支持向量机SVM
目录 一、SVM (Support Vector Machine) 概述(一)支持向量机SVM的主要特点(二)支持向量与间隔最大化(三)线性可分/不可分(四)软间隔 (soft margin) 与核技巧 (kernel trick)…...
当代人工智能三教父——深度学习三巨头
文章目录 引言 人物介绍 突出贡献 专业名词解释 引言 今天下午闲来无事翻阅了一下csdn首页的头条文章——《27 岁天才创始人 Joel Hellermark 分享了自己和“AI 教父” Geoffery Hinton 的最新采访》 感觉挺有意思,就从头到尾的看了一遍,里面有很多…...
Django项目从创建到开发以及数据库连接的主要步骤,精简实用
1、项目创建 安装命令:pip install django3 -i <https://pypi.tuna.tsinghua.edu.cn/simple>上述命令是使用清华镜像,安装django3在项目的创建目录执行命令:django-admin startproject 项目名称(英文)就可以在指…...
linux 命令 grep 排除 No such file or directory
du -sh * 2>&1 | grep -v "proc" command 2>&1 | grep -v "No such file or directory" 这里的 2>&1 是将错误输出重定向到标准输出,然后 grep -v "No such file or directory" 会过滤掉包含 &qu…...
Unity 滑动条(Slider)拖拽开始和结束、点击等事件的拓展功能
目录 前言 一、关于slider的监听事件 二、方案一 (无脚本版) 三、方案二 (继承slider脚本进行拓展) 四、方案三(外部脚本添加) 前言 前一段时间在使用这个功能,发现搜索出来的文章和脚本&…...
Linux 学习知识 (简单易懂 )持续更新 Linux输出重定向 Linux通配符 Linux正则表达式 持续更新....
一.输出重定向 标准输出:是将信息输出在终端 标准错误输出:在执行命令的过程中所产生错误信息也是输出在终端标准输入:从键盘输入 1.1标准输出重定向 作用:将本来要显示在终端上的信息重定向到一个文件中 实现方法:…...
前端vue用el-table如何实现表头内容过长换行处理,实现换行效果
前端vue用el-table如何实现表头内容过长换行处理,实现换行效果 这是效果图 有两种方法,一种简易版本,一种万能方法,都是el-table,先看文档 表头标题是可以自定义的 方法一 label的解释写在代码里面了,这里会自动形成换…...
15:00面试,15:08出来,面试问的有点变态。。。。
🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 从小厂出来,没想到在另一家公司又寄了。 到这家公司开始上班,加班是每天…...
【BUG】流式响应requests得到: ping - 和时间戳
前情提要 运行Langchain-Chatchat项目,使用自定义请求访问API Server流式输出 报错展示 b: ping - 2024-05-22 00:46:04.83252000:00\r\n\r\n报错原因 这通常是由于 Server-Sent Events (SSE) 实现中使用的“心跳”机制,以确保连接保持活跃。一些 SSE…...
人工智能应用-实验5-BP 神经网络分类手写数据集
文章目录 🧡🧡实验内容🧡🧡🧡🧡代码🧡🧡🧡🧡分析结果🧡🧡🧡🧡实验总结🧡🧡 ǹ…...
K8s Pod 资源进阶
文章目录 K8s Pod 资源进阶pod 资源限制限制资源单位 资源限制实战Pod 服务质量QosDownward API可注入的元数据信息环境变量方式注入元数据存储卷方式注入元数据为注册服务注入Pod 名称为 JVM 注入堆内存限制 K8s Pod 资源进阶 pod 资源限制 资源限制的方法: Req…...
掌握Edge浏览器的使用技巧
导言: Edge浏览器是微软推出的一款现代化、高效的网络浏览器。它不仅提供了基本的浏览功能,还具备了许多强大的特性和技巧,可以帮助用户更好地利用浏览器进行工作和娱乐。本文将介绍一些Edge浏览器的使用技巧,帮助读者更好地掌握这…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
#Uniapp篇:chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器:Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
