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

运行结果:

相关推荐
ChinaDragonDreamer6 天前
HarmonyOS:知识点总结(一)
harmonyos·鸿蒙
加农炮手Jinx6 天前
Flutter for OpenHarmony 实战:JWT — 构建安全的无状态认证中心
网络·flutter·华为·harmonyos·鸿蒙
雷帝木木6 天前
Flutter for OpenHarmony:Flutter 三方库 money2 — 坚不可摧的鸿蒙金融核心组件
网络·flutter·http·华为·金融·harmonyos·鸿蒙
特立独行的猫a7 天前
uniapp-x的HarmonyOS鸿蒙应用开发:tabbar底部导航栏的实现
华为·uni-app·harmonyos·鸿蒙·uniapp-x
●VON7 天前
HarmonyOS应用开发实战(基础篇)Day10 -《鸿蒙网络请求实战》
网络·学习·华为·harmonyos·鸿蒙·von
●VON8 天前
HarmonyOS应用开发实战(基础篇)Day08-《构建布局详解上》
华为·harmonyos·鸿蒙·von
加农炮手Jinx10 天前
Flutter for OpenHarmony 实战:疯狂头像 App(三)— 复合动画与交互反馈 — 让 UI 跃动起来
flutter·ui·交互·harmonyos·鸿蒙
_waylau11 天前
鸿蒙架构师修炼之道-架构师设计思维特点
华为·架构·架构师·harmonyos·鸿蒙·鸿蒙系统
Betelgeuse7611 天前
【Flutter For OpenHarmony】 项目结项复盘
华为·交互·开源软件·鸿蒙
ITUnicorn12 天前
【HarmonyOS 6】进度组件实战:打造精美的数据可视化
华为·harmonyos·arkts·鸿蒙·harmonyos6