开源鸿蒙 组件创建和重新初始化
组件创建和重新初始化
初始创建和渲染
创建父组件ParentComp;
本地初始化ParentComp的状态变量isCountDown;
执行ParentComp的build函数;
创建Column内置组件;
- 创建Text内置组件,设置其文本展示内容,并将Text组件实例添加到Column中;
- 判断if条件,创建true分支上的组件;
- 创建Image内置组件,并设置其图片源地址;
- 使用给定的构造函数创建TimerComponent;
- 创建TimerComponent对象;
- 本地初始化成员变量初始值;
- 使用TimerComponent构造函数提供的参数更新成员变量的值;
- 执行TimerComponent的aboutToAppear函数;
- 执行TimerComponent的build函数,创建相应的UI描述结构;
- 创建Button内置组件,设置相应的内容。
状态更新
用户单击按钮时:
ParentComp的isCountDown状态变量的值更改为false;
执行ParentComp的build函数;
Column内置组件会被框架重用并执行重新初始化;
Column的子组件会重用内存中的对象,但会进行重新初始化;
- Text内置组件会被重用,但使用新的文本内容进行重新初始化;
- 判断if条件,使用false分支上的组件;
- 原来true分支上的组件不在使用,这些组件会进行销毁;
- 创建的Image内置组件实例进行销毁;
- TimerComponent组件实例进行销毁,aboutToDisappear函数被调用;
- 创建false分支上的组件;
- 创建Image内置组件,并设置其图片源地址;
- 使用给定的构造函数重新创建TimerComponent;
- 新创建的TimerComponent进行初始化,并调用aboutToAppear函数和build函数。
- 原来true分支上的组件不在使用,这些组件会进行销毁;
- Button内置组件会被重用,但使用新的图片源地址。
示例
// xxx.ets
@Entry
@Component
struct ParentComp {
@State isCountDown: boolean = true
build() {
Column() {
Text(this.isCountDown ? 'Count Down' : 'Stopwatch')
if (this.isCountDown) {
Image('countdown.png')
TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red})
} else {
Image('stopwatch.png')
TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
}
Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down')
.onClick(() => {this.isCountDown = !this.isCountDown})
}
}
}
// Manage and display a count down / stop watch timer
@Component
struct TimerComponent {
@State counter: number = 0
private changePerSec: number = -1
private showInColor: Color = Color.Black
private timerId : number = -1
build() {
Text(`${this.counter}sec`)
.fontColor(this.showInColor)
}
aboutToAppear() {
this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000)
}
aboutToDisappear() {
if (this.timerId > 0) {
clearTimeout(this.timerId)
this.timerId = -1
}
}
}
你可能感兴趣的文章
0
赞
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦