一、示例效果图片
二、事件
挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。(api7开始支持)
名称 | 支持冒泡 | 功能描述 |
---|---|---|
onAppear(event: () => void) | 否 | 组件挂载显示时触发此回调。 |
onDisappear(event: () => void) | 否 | 组件卸载消失时触发此回调。 |
三、示例代码
appear.ets
import prompt from '@ohos.prompt';
@Component
export default struct AppearExample {
@State isShow: boolean = true;
@State changeAppear: string = 'Hide Text';
private myText: string = 'Text for onAppear';
build() {
Column() {
Button(this.changeAppear)
.onClick(() => {
this.isShow = !this.isShow;
}).margin(15)
if(this.isShow) {
Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
.onAppear(() => {
this.changeAppear = 'Hide Text';
prompt.showToast({
message: 'The text is shown',
duration: 2000
})
})
.onDisAppear(() => {
this.changeAppear = 'Show Text';
prompt.showToast({
message: 'The text is hidden',
duration: 2000
})
})
}
}.padding(30).width('100%')
}
}复制复制
index.ets
import appear from '../eventMuster/appear'
@Entry
@Component
struct Index {
build() {
Column() {
appear()
}
.width('100%')
.height('100%')
}
}复制复制