02-鸿蒙学习之4.0todoList练习

02-鸿蒙学习之4.0todoList练习

代码

/**
 * 1:组件必须使用@Component装饰
 * 2.@Entry 装饰哪个组件，哪个组件就呈现在页面上
 * 3.被@Entry 装饰的入口组件。build（）必须有且仅有一个根 ** 容器 ** 组件
 *  其他的自定义组件，build() 中必须有且仅有一个根组件
 */
 /**
 * 入口文件
 */
@Entry
@Component
struct Index {
  @State message: string = '诗文学习'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        itemComponent({ content: 'hahahha' })
        itemComponent()
      }
      .width('100%')
    }
    .height('100%')
  }
}

 /**
 * 子组件
 */
@Component
struct itemComponent {
  // 自定义组件可以使用私有变量（都是私有化的） 传递参数
  private content: string = '青山隐隐水迢迢，秋尽江南草未凋'
  // @state 驱动UI更新
  @State isDone: boolean = false

  build() {
    // 必须有一个根组件
    Row() {
      Image(this.isDone ? $r('app.media.todo_ok') : $r('app.media.todo_default'))
        .width(20)
        .height(20)
        .margin(15)
      Text(this.content)
        .decoration({
          type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None
        })
    }
    .width('98%')
    .backgroundColor(Color.Pink)
    .borderRadius(25)
    .margin({
      top: 5
    })
    .onClick(() => {
      this.isDone = !this.isDone
    })
  }
}
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

实现效果：

icon 图片