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()
相关推荐
HarmonyOS小助手3 天前
“秒开”时代,HarmonyOS预加载让应用启动快如闪电
harmonyos·鸿蒙·鸿蒙生态
_waylau4 天前
跟老卫学HarmonyOS开发:HarmonyOS ArkTS 获取位置服务
华为·开源·harmonyos·鸿蒙
迷曳5 天前
28、鸿蒙Harmony Next开发:不依赖UI组件的全局气泡提示 (openPopup)和不依赖UI组件的全局菜单 (openMenu)、Toast
前端·ui·harmonyos·鸿蒙
儿歌八万首5 天前
鸿蒙ArkTS多环境API管理与安全签名方案实践
安全·harmonyos·arkts·签名
脑袋大大的5 天前
跨端分栏布局:从手机到Pad的优雅切换
javascript·uni-app·uniapp·安卓·鸿蒙·app开发·混合开发
屿筱5 天前
鸿蒙与web混合开发双向通信
鸿蒙·harmonyos5
SuperHeroWu76 天前
【HarmonyOS】ArkTS语法详细解析
华为·harmonyos·arkts·鸿蒙·编程语言·语法·详解
迷曳8 天前
21、鸿蒙Harmony Next开发:组件导航(Navigation)
前端·harmonyos·鸿蒙·navigation
迷曳8 天前
29、鸿蒙Harmony Next开发:深浅色适配和应用主题换肤
ui·华为·harmonyos·鸿蒙