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

KillerNoBlood2025-07-07 14:16

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()