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