HarmonyOS学习4 --- 创建一个页面

1、声明式UI语法

@Entry
@Component
struct My_page {
  @State isLogin: boolean = false

  build() {
    Row() {
      Image(this.isLogin ? $r('app.media.icon_leon') : $r('app.media.icon'))
        .height(60)
        .width(60)
        .onClick(() => {
          this.isLogin = !this.isLogin
        })

      Text(this.isLogin ? $r('app.string.string_to_unlogin') : $r('app.string.string_to_unlogin'))
        .fontWeight(FontWeight.Bold)
        .fontSize(20)
        .fontColor(this.isLogin ? Color.Orange : Color.Black)
        .margin({ "top": "0.00vp", "right": "0.00vp", "bottom": "0.00vp", "left": "10.00vp" })
    }
    .width('100%')
    .margin({ "top": "20.00vp", "right": "10.00vp", "bottom": "0.00vp", "left": "10.00vp" })
  }
}

2、自定义组件

2.1、自定义组件生命周期

注：页面，即由 @Entry 修饰的自定义组件

注：自定义组件，即由 @Component 修饰的UI单元

1）aboutToAppear()

2）onPageShow()

注：仅在被 @Entry 修饰的组件中生效

3）onBackPress()

注：仅在被 @Entry 修饰的组件中生效

4）onPageHide()

注：仅在被 @Entry 修饰的组件中生效

5）aboutToDisappear()

2.2、案例

注：@State 可建立起视图与状态之间的绑定关系

• ToItem

@Component
export default struct ToItem {
  public message?: string
  @State isComplete: boolean = false

  @Builder leonSelectLabel(icon: Resource) {
    Image(icon)
      .objectFit(ImageFit.Contain)
      .width('28vp')
      .width('28vp')
      .margin('20vp')

  }

  build() {
    Row() {
      if (this.isComplete) {
        this.leonSelectLabel($r('app.media.ic_ok'))
      } else {
        this.leonSelectLabel($r('app.media.ic_default'))
      }
      Text(this.message??'无')
        .fontSize('20fp')
        .fontWeight(FontWeight.Bold)
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
        .fontColor(this.isComplete ? Color.Gray : Color.Black)
    }
    .width('100%')
    .borderRadius(6)
    .backgroundColor(Color.White)
    .onClick(() => {
      this.isComplete = !this.isComplete
    })
  }
}

• ToDoListPage

import ToDoItem from '../view/ToDoItem'
import DataModel from '../viewmodel/DataModel'

@Entry
@Component
struct ToDoListPage {
  private todoLists: string[]

  aboutToAppear() {
    this.todoLists = DataModel.getData()
  }

  build() {

    Column({ space: 16 }) {

      Text("待办任务列表")
        .fontWeight(FontWeight.Bold)
        .fontSize(30)
        .fontColor(Color.Blue)
        .margin({ top: 10, left: 10 })


      ForEach(this.todoLists, (item: string) => {
        ToDoItem({ message: item }).width('90%')
      }, (item: string) => JSON.stringify(item))

    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.page_background'))

  }
}

• DataModel

export class DataModel {
  public tasks: string[] = ["早起晨练", "准备早饭", "学习编程", "阅读名著", "自由活动"]

  getData() {
    return this.tasks
  }
}


export default new DataModel()