当点击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)
  }
}

运行结果:

相关推荐
●VON1 天前
【成长纪实】三个月的鸿蒙成长之路:大学生从0开始的鸿蒙心得与体会
华为·架构·harmonyos·鸿蒙·鸿蒙系统·鸿蒙开发·成长纪实
BlackWolfSky1 天前
鸿蒙UI适配
华为·harmonyos·鸿蒙
后端小张2 天前
【案例实战】初探鸿蒙开放能力:从好奇到实战的技术发现之旅
分布式·华为·云计算·harmonyos·鸿蒙·鸿蒙系统·万物互联
那年窗外下的雪.2 天前
鸿蒙ArkUI布局与样式进阶(十五)—— 模块化 · 自定义组件 · 泛型机制深度解析
javascript·华为·typescript·harmonyos·鸿蒙·arkui
特立独行的猫a3 天前
仓颉语言宏(Cangjie Macros)详细介绍及强大使用
华为··鸿蒙·仓颉·仓颉语言
●VON4 天前
双非大学生自学鸿蒙5.0零基础入门到项目实战 -《基础篇》
android·华为·harmonyos·鸿蒙
小虚竹4 天前
使用仓颉语言实现 nanoid:一个安全的唯一 ID 生成器
运维·服务器·安全·鸿蒙
普中科技5 天前
【普中Hi3861开发攻略--基于鸿蒙OS】-- 第 31 章 WIFI 实验-华为 IoTDA 设备接入
单片机·嵌入式硬件·华为云·鸿蒙·liteos·hi3861·普中科技
七夜zippoe5 天前
仓颉语言核心特性深度解析——现代编程范式的集大成者
开发语言·后端·鸿蒙·鸿蒙系统·仓颉