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

1、声明式UI语法

 

@Entry
@Component
struct My_page {@State isLogin: boolean = falsebuild() {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()