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

运行结果:

相关推荐
懒惰蜗牛2 天前
鸿蒙开发3--UI布局(玩转鸿蒙的Row、Column与Stack容器)
ui·华为·harmonyos·鸿蒙·鸿蒙系统
_waylau2 天前
如何将鸿蒙5应用升级到鸿蒙6
华为·harmonyos·鸿蒙·鸿蒙系统
ChinaDragonDreamer6 天前
HarmonyOS:固定样式弹出框
harmonyos·鸿蒙
鸿蒙小白龙8 天前
【OpenHarmony实战】系统参数SystemParameter完全指南:param get/set调试技巧与案例精解
harmonyos·鸿蒙·open harmony
鸿蒙小白龙8 天前
OpenHarmony中的系统服务管理配置讲解
harmonyos·鸿蒙·鸿蒙系统·open harmony
ai安歌8 天前
【走进鸿蒙002】文件操作案例:创建、写入和读取文件
鸿蒙
程序员潘Sir8 天前
鸿蒙应用开发从入门到实战(十六):线性布局案例
harmonyos·鸿蒙
程序员潘Sir9 天前
使用Tabs选项卡组件快速搭建鸿蒙APP框架
harmonyos·鸿蒙
鸿蒙小白龙11 天前
openharmony之充电空闲状态定制开发
harmonyos·鸿蒙·鸿蒙系统·open harmony
程序员潘Sir11 天前
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
harmonyos·鸿蒙