1.项目介绍
本项目是基于鸿蒙arkts开发的简单手机备忘录，可以实现备忘录的添加和注释，以及删除功能。ArkTS是HarmonyOS应用开发语言。arkts在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用，此项目在黑马程序员的讲解上添加了自己的内容。
首先新建一个empty ablity，在page下创建一个second.ets
该项目的构成由首页和备忘录页面构成，在用户进入首页后点击“开始规划日程”进行创建备忘录。
点击"开始规划日程"，我们进入了主要页面index.ets，在该页面中，可以添加备忘录和回到首页，当添加一次备忘录时，总数就会加一，完成一个代办后，完成代办的数量回加一。
滑动备忘录，我们可以选择删除它
2.代码讲解
second.ets
//引用路由
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = '欢迎使用'
@State tips: string = '开始规划日程'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button(this.tips)
.width(200)
.height(60)
.fontColor(Color.White)
.fontSize(20)
.margin({
top: 20
})
.onClick(() => {
router.pushUrl({
url: "pages/Index",
params: {
data: "从首页带到第二页的数据"
}
})
})
}
.width('100%')
}
.height('100%')
}
}开始时用state定义了两个string形式的变量，在页面ui描述内完成了组件的定义和它们的属性添加，最后使用onClick(()=>())完成向index.ets的跳转。
在开始编写页面前，首先要进行几个准备：
1.任务类的编写
2.用@style装饰器 将card编写为一个函数
3.用struct声明index的数据结构，
handleTaskChange此函数用于当改变备忘录的数量时，可以改变task数组的数量和每个任务的bool状态。
使用build内部的代码块描述页面，由于备忘录从上至下创建，采用行布局，会多次使用到row()组件。接下来就是添加各种组件，在页面最上方的card组件中，添加了text组件和用于计数的stack组件。
在下方“回到首页“按钮采用了页面跳转的逻辑，”新建代办“用于添加新的任务。接着，使用foreach遍历task数组，为添加的每个任务设置特定组件，并设计每一个组件的功能和效果。
最后使用@Builder装饰器封装了删除函数，用于滑动删除代办。
index.ets
import router from '@ohos.router';
class Task{
static id: number = 1
name: string = `作业${Task.id++}`
finished:boolean = false
}
@Styles function card(){
.width('95%')
.padding(20)
.backgroundColor(Color.Yellow)
.borderRadius(15)
.shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY:4})
}
//继承task 任务完成的格式
@Extend(Text) function finishedTask(){
.decoration({type:TextDecorationType.LineThrough})
.fontColor('#B1B2B1')
}
@Entry
@Component
struct Index {
@State totalTask: number = 0
@State finishTask: number = 0
@State tasks: Task[] = []
@State tips: string = "返回首页"
handleTaskChange() {
//更新数量
this.totalTask = this.tasks.length
this.finishTask = this.tasks.filter(item => item.finished).length
}
build() {
Column({ space: 10 }) {
//列式布局，占满整个屏幕
Row() {
//制作备忘录卡片
Text('完成进度：').fontSize(30)
.fontWeight(FontWeight.Bold)
Stack() {
Progress({
value: this.finishTask,
total: this.totalTask,
type: ProgressType.Capsule
})
.width(100)
Row() {
Text(this.finishTask.toString())
.fontSize(24)
Text('/' + this.totalTask.toString())
.fontSize(24)
}
}
}
.card()
.margin({ top: 20, bottom: 10 })
.justifyContent(FlexAlign.SpaceEvenly)
Button(this.tips)
.width(200)
.height(33)
.fontColor(Color.White)
.fontSize(20)
.onClick(()=>{
router.back()
})
//2.添加任务按钮
Button('新增待办')
.width(200)
.onClick(() => {
//添加任务总数据和数量
this.tasks.push(new Task())
this.handleTaskChange()
})
List({ space: 10 }) {
ForEach(
this.tasks,
(item: Task, index) => {
ListItem() {
Row() {
Text(item.name).fontSize(20)
// 设置任务框文本内容
TextInput()
.fontColor(Color.Blue)
.fontSize(20)
.width(100)
Checkbox().select(item.finished)
.onChange(val => {
//更新已完成数量和当前任务的状态
item.finished = val
this.handleTaskChange()
})
}.card()
.justifyContent(FlexAlign.SpaceBetween)
}
//设置删除功能
.swipeAction({ end: this.DeleteButton(index) })
//.swipeAction({end: TextInput})
}
)
}
.width('100%')
//居中
.alignListItem(ListItemAlign.Center)
//分配剩下高度
.layoutWeight(1)
//遍历任务
//
}
}
@Builder DeleteButton(index: number) {
Button() {
Image($r('app.media.icon'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Capsule)
.backgroundColor(Color.Red)
.onClick(() => {
this.tasks.splice(index, 1)
this.handleTaskChange()
})
}
}
