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

运行结果:

相关推荐
hashiqimiya4 天前
理解更深的鸿蒙的嵌套属性和@State装饰器,引用是更改了吗?深层拷贝。
鸿蒙
A懿轩A5 天前
【OpenHarmony】跨平台开发鸿蒙Harmony项目框架选择建议
华为·鸿蒙·openharmony·开源鸿蒙
穆雄雄6 天前
sd 适配 OpenHarmony构建指南
鸿蒙
一只栖枝6 天前
HarmonyOS 开发高级认证是什么?含金量高吗?
华为·华为认证·harmonyos·鸿蒙·考证
汉堡黄•᷄ࡇ•᷅6 天前
鸿蒙开发:应用通知栏基本操作
鸿蒙·鸿蒙系统
夏文强6 天前
HarmonyOS开发-数据管理-ArkData(3)- 关系型数据库
前端·数据库·harmonyos·鸿蒙
熊猫钓鱼>_>7 天前
从零到一:使用 ArkTS 构建你的第一个鸿蒙应用
华为·移动开发·harmonyos·arkts·鸿蒙·component·网页开发
Kisang.7 天前
【HarmonyOS】ArkWeb——从入门到入土
前端·华为·typescript·harmonyos·鸿蒙
Kisang.8 天前
【HarmonyOS】性能优化——组件的封装与复用
华为·性能优化·typescript·harmonyos·鸿蒙