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()
相关推荐
simple丶5 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
HarmonyOS小助手9 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
keepDXRcuriosity14 小时前
鸿蒙应用开发课设——鸿蒙青藤社
harmonyos·鸿蒙
伍哥的传说2 天前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
伍哥的传说2 天前
鸿蒙系统(HarmonyOS)经典红色风格登录页布局
前端·华为·harmonyos·鸿蒙·鸿蒙系统
伍哥的传说3 天前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
我睡醒再说14 天前
HarmonyOS 5 多端适配原理与BreakpointSystem工具类解析:附代码
windows·华为·harmonyos·arkts·应用开发
HarmonyOS小助手14 天前
京东正式开源Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架
harmonyos·鸿蒙·harmonyos next·harmonyos 5.0·鸿蒙5·鸿蒙生态
在人间耕耘15 天前
鸿蒙云函数与云数据库开发实践
鸿蒙