HarmonyOS自学-Day4(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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

---

继续加功能

@Entry
@Component
struct Index {
  @State userInput:string = ''; // 用户输入
  @State toDoList:string[] = []; // 待办事项的数组
  build() {
    Column(){
      // 标题
      Row(){
        Text('TodoList')
          .fontSize(40)
      }
      .margin({top:100})
      // 全部完成
      Row(){
        Row(){
          CheckboxGroup({group:'listGroup'})
            .margin({right:10})
          Text('全部完成')
            .fontSize(20)
        }
      }
      .width('90%')
      .margin({top:30})
      .justifyContent(FlexAlign.SpaceBetween)
      // 输入框与提交按钮
      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:10})
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.SpaceAround)
      // 待办事项列表
      List(){
        if (this.toDoList.length) {
          // 展示列表
          ForEach(this.toDoList,(item:string,index:number)=>{
            ListItem(){
              toDo({item,index,callback:this.deleteToDo})
            }
            .width('90%')
            .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%')
  }
  // 删除待办事项
  deleteToDo = (index:number)=>{
    this.toDoList.splice(index,1)
  }
}

@Component
struct toDo {
  private item:string
  private index:number
  private callback:(index:number)=>void
  @State isChecked:boolean = false
  build(){
    Row(){
      // 勾选框
      Checkbox({group:'listGroup'})
        .select(this.isChecked)
        .onChange((value:boolean)=>{
          this.isChecked = value
        })
      // 代办事项内容
      Text(this.item)
        .fontSize(25)
        .decoration({type:this.isChecked?TextDecorationType.LineThrough:TextDecorationType.None})
      // 删除按钮
      Button('删除')
        .width(80)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .onClick(()=>{
          this.callback(this.index)
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

效果如下：