当点击button时就会,弹出一段信息,然后就消失的效果

下面是一个鸿蒙 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)
  }
}

运行结果:

相关推荐
Francek Chen2 天前
【华为Pura80系列】鸿蒙生态再升级:Pura 80 系列影像突破,WATCH 5 开启智能手表新纪元
华为·harmonyos·鸿蒙·智能手表·pura80·watch 5
编号:05172 天前
【HarmonyOS 5.0】开发实战:从UI到Native全解析
鸿蒙·devecostudio·harmonyos5.0
萌虎不虎4 天前
【鸿蒙在 ETS (Extendable TypeScript) 中创建多级目录或文件,可以使用鸿蒙的文件系统 API】
鸿蒙
颜颜yan_4 天前
【HarmonyOS5】UIAbility组件生命周期详解:从创建到销毁的全景解析
架构·harmonyos·鸿蒙·鸿蒙系统
颜颜yan_6 天前
深入解析HarmonyOS5 UIAbility组件:从核心架构到实战应用
架构·harmonyos·鸿蒙·鸿蒙系统
Raink老师7 天前
鸿蒙任务项设置案例实战
harmonyos·鸿蒙·案例实战
HarmonyOS小助手9 天前
【鸿蒙生态学堂04】ArkUI开发基础(上)
harmonyos·鸿蒙·harmonyos next·arkui(方舟ui框架)介绍·使用常用组件构建页面·harmonyos 5.0·鸿蒙5·鸿蒙课程·鸿蒙生态
鸿蒙自习室10 天前
鸿蒙UI开发——组件的自适应拉伸
ui·华为·harmonyos·鸿蒙
王二蛋和他的狗10 天前
HarmonyOS运动开发:精准估算室内运动的距离、速度与步幅
鸿蒙