HarmonyOS自学-Day4(TodoList案例)

目录

  • 文章声明⭐⭐⭐
  • 让我们开始今天的学习吧!
    • TodoList小案例


文章声明⭐⭐⭐

  1. 该文章为我(有编程语言基础,非编程小白)的 HarmonyOS自学笔记,此类文章笔记我会默认大家都学过前端相关的知识
  2. 知识来源为 HarmonyOS官方文档,归纳为自己的语言与理解记录于此
  3. 不出意外的话,我大抵会 持续更新
  4. 想要了解前端开发(技术栈大致有:Vue2/3、微信小程序、uniapp、HarmonyOS、NodeJS、Typescript)与Python的小伙伴,可以关注我!谢谢大家!

让我们开始今天的学习吧!

TodoList小案例

效果图如下:
在这里插入图片描述
代码如下:

@Entry
@Component
struct Index {@State userInput:string = ''; // 用户输入@State toDoList:string[] = ['吃饭','睡觉','打豆豆']; // 待办事项的数组build() {Column(){// 标题Row(){Text('TodoList').fontSize(40)}.margin({top:100})// 输入框与提交按钮Row(){// 输入框TextInput({text:this.userInput,placeholder:'请输入代办项:'}).width(220).height(50).fontSize(20).onChange((newValue:string)=>{this.userInput = newValue})// 提交按钮Button('提交').width(80).height(50).onClick(()=>{// 提交至待办事项数组this.toDoList.push(this.userInput)// 清空用户输入this.userInput = ''})}.width('100%').height('10%').margin({top:30}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)// 待办事项列表List(){if (this.toDoList.length) {// 展示列表ForEach(this.toDoList,(item:string,index:number)=>{ListItem(){Row(){// 代办事项内容Text(item).fontSize(25)// 删除按钮Button('删除').width(100).backgroundColor(Color.Red).fontColor(Color.White).onClick(()=>{this.toDoList.splice(index,1)})}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.width('80%').height(50).margin({top:10})},(item:string,index:number)=>item+index.toString())} else {// 数组为空,展示提示文字ListItem(){Text('暂无待办事项').fontSize(30)}.margin({top:30})}}.width('100%').height('50%').alignListItem(ListItemAlign.Center).scrollBar(BarState.Auto)}.width('100%').height('100%')}
}

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

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

相关文章

【蓝桥杯】比赛大纲整理

枚举[1-3] 排序 (1)冒泡排序[2] (2)选择排序[3] (3)插入排序[3] 搜索(bfs, dfs)[1-5] 贪心[1-5] 模拟[1-3] 二分[2-5] DP(普通一维问题)[3-5] 高精度[1-5] 数据结构 (1)栈[2-4]&…

Linux sed命令教程:如何使用流编辑器进行文本处理(附实例教程和注意事项)

Linux sed命令介绍 sed是stream editor的缩写,意为流编辑器。它是一种在命令行下处理文本文件的工具。sed主要用于自动编辑一个或多个文件、简化对文件的反复操作、编写转换程序等。 Linux sed命令适用的Linux版本 sed命令在大多数Linux发行版中都是预装的&#…

Java插入排序:优雅整理数据的艺术

Java插入排序:优雅整理数据的艺术 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,让我们一同深入研究Java中的排序算法,探讨…

1.NumPy 介绍

1.NumPy 介绍 1.1 NumPy 演变史 在 NumPy 之前,有两个 Python 数组包: Numeric 包 Numeric 包开发于 20 世纪 90 年代中期,在 Python 中提供了数组对象和数组感知函数。它由 C 语言编写,并与线性代数的标准快速实现相链接。它最…

nodejs微信小程序+python+PHP的林业信息管理系统的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

nodejs+vue+微信小程序+python+PHP的冷链物流配送系统-计算机毕业设计推荐

对于冷链物流信息调度系统所牵扯的管理及数据保存都是非常多的,例如管理员;首页、用户管理(管理员、客户、业务员、配送员)客户管理(货物信息、客户运输单、车辆信息、调度安排)这给管理者的工作带来了巨大…

Redisson依赖冲突记录

前言&#xff1a;项目使用的springboot项目为2.7.X 依赖冲突一&#xff1a;springboot 与 redisson版本冲突 项目中依赖了 Lock4j&#xff0c;此为苞米豆开源的分布式锁组件 <dependency><groupId>com.baomidou</groupId><artifactId>lock4j-redisso…

读算法霸权笔记07_筛选

1. 美国残疾人法案 1.1. 1990年 1.2. 公司在招聘时使用身体检查是非法的 1.3. 有某些心理健康问题的人被“亮了红灯”&#xff0c;他们因此没能找到一份正常的工作&#xff0c;过上正常的生活&#xff0c;这就使其进一步被社会孤立&#xff0c;而这正是《美国残疾人法案》要…

使用Halcon 采集图像并进行简单处理rgbl_to_gray/threshold/connection/fill_up

使用Halcon 采集图像并进行简单处理 文章目录 使用Halcon 采集图像并进行简单处理 下面介绍一个简单的采集图像的例子。在Halcon中利用图像采集接口&#xff0c;使用USB3.0相机实时拍摄图像。采集到图像后对图像进行简单的阀值分割处理&#xff0c;将有物体的区域标记出来。 &a…

3d光学轮廓仪测微光学器件应用及其重要意义

微光学器件是光学器件的重要分支&#xff0c;为光学通信、光传感、光计算等领域的发展提供重要支撑。微光学器件具有尺寸小、功耗低、低成本等优势&#xff0c;可以于电子器件集成&#xff0c;实现更高效的数据传输和信号处理。未来&#xff0c;随着微纳加工技术的进一步发展&a…

prerender-spa-plugin使用总结

1. 介绍 prerender-spa-plugin 利用了 Puppeteer 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大&#xff0c;所以很简单就能将运…

在 Golang 应用程序中管理多个数据库

掌握在 Golang 项目中处理多个数据库的艺术 在当前软件开发领域中&#xff0c;处理单个应用程序内的多个数据库的需求越来越普遍。具有强大功能的 Golang 是处理此类任务的绝佳解决方案&#xff0c;无论您是与多个数据源合作还是仅为增强组织和可扩展性而分隔数据。在本文中&a…

FastAPI使用异步Redis

1. 安装依赖 pip install fastapi redis uvicorn 2. 主要代码 #!/usr/bin/env python import os import sys from contextlib import AbstractAsyncContextManager, asynccontextmanager from datetime import timedelta from pathlib import Pathfrom fastapi import FastA…

Java开发框架和中间件面试题(7)

目录 63.Spring中都应用了哪些设计模式&#xff1f; 64.请举例说明如何在Spring中注入一个Java Collection&#xff1f; 65.说一下都有哪些基本理念&#xff1f; 67.Spring Bean的生命周期&#xff1f; 68.说说Spring AOP的实现原理&#xff1f; 69.Spring中事务的实现方…

vue3导入excel并解析excel数据渲染到表格中,纯前端实现。

需求 用户将已有的excel上传到系统&#xff0c;并将excel数据同步到页面的表格中进行二次编辑&#xff0c;由于excel数据不是最终数据&#xff0c;只是批量的一个初始模板&#xff0c;后端不需要存储&#xff0c;所以该功能由前端独立完成。 吐槽 系统中文件上传下载预览三部…

在pytorch中,读取GPU上张量的数值 (数据从GPU到CPU) 的几种常用方法

1、.cpu() 方法&#xff1a; 使用 .cpu() 方法可以将张量从 GPU 移动到 CPU。这是一种简便的方法&#xff0c;常用于在进行 CPU 上的操作之前将数据从 GPU 取回 import torch# 在 GPU 上创建一个张量 gpu_tensor torch.tensor([1, 2, 3], devicecuda)# 将 GPU 上的张…

AI赋能金融创新:技术驱动的未来金融革命

人工智能&#xff08;AI&#xff09;作为一种技术手段&#xff0c;正逐渐改变金融行业的方方面面。从风险管理到客户体验&#xff0c;从交易执行到反欺诈&#xff0c;AI带来了许多创新和机遇。本文将探讨AI在金融领域的应用和其赋能的金融创新。 金融领域一直以来都面临着复杂的…

QT UI自动化测试(1)

一、框架选择 想结合公司产品搭建一套自动化测试框架&#xff0c;一方面自己学习用&#xff0c;一方面也希望跟公司业务结合起来&#xff0c;双赢。公司软件最多的产品是部署在Linux系统上&#xff0c;基于QT QML开发的UI&#xff0c;本来奔着免费的自动化框架去的&#xff0c;…

编写html的vscode快捷键

一快速生成 按住!(英文的)&#xff0c;回车。 二快捷键 1.代码格式化 用来对齐标签。整理代码&#xff0c;强迫症患者必备。 shiftaltf 2.快速移动一行 altdown altup 向上或向下移动一行 3.快速复制一行代码 ShiftAltUp ShiftAltDown 4.快速保存 Ctrl S 5.快速查…

ViT的极简pytorch实现及其即插即用

先放一张ViT的网络图 可以看到是把图像分割成小块&#xff0c;像NLP的句子那样按顺序进入transformer&#xff0c;经过MLP后&#xff0c;输出类别。每个小块是16x16&#xff0c;进入Linear Projection of Flattened Patches, 在每个的开头加上cls token和位置信息&#xff0c;…