下面是一个鸿蒙 ArkTS 示例代码,实现点击按钮后弹出一段提示信息,短暂显示后自动消失 的效果。
✅ 实现思路
-
使用
Text
显示提示信息 -
使用
Visibility
控制其显示/隐藏 -
用
setTimeout
设置延迟消失
@Entry
@Component
struct AutoDismissMessage {
@State showMessage: boolean = false
build() {
Column() {
// 显示提示文本
if (this.showMessage) {
Text('操作成功!')
.fontSize(20)
.fontColor(Color.Green)
.margin({ bottom: 20 })
}
// 按钮点击后显示提示,并在2秒后自动隐藏
Button('点击弹出提示')
.fontSize(20)
.onClick(() => {
this.showMessage = true
setTimeout(() => {
this.showMessage = false
}, 2000) // 显示2秒后自动隐藏
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
}
运行结果:
