当点击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 小时前
鸿蒙UI开发——实现一个上拉抽屉效果
ui·华为·harmonyos·鸿蒙
Raink老师13 小时前
制作大风车动画
前端·harmonyos·鸿蒙·案例实战
Bruce_Liuxiaowei17 小时前
HarmonyOS NEXT~鸿蒙系统与mPaaS三方框架集成指南
华为·harmonyos·鸿蒙·鸿蒙系统
hashiqimiya1 天前
鸿蒙路由参数传递
鸿蒙·路由参数传递
ChinaDragonDreamer1 天前
HarmonyOS:使用PickerController将编辑后的图片替换原图
harmonyos·鸿蒙
幽蓝计划2 天前
仓颉开发语言入门教程:搭建开发环境
开发语言·鸿蒙
周胡杰3 天前
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
数码相机·flutter·华为·电脑·harmonyos·鸿蒙
小陈从不熬夜3 天前
HarmonyOS AVPlayer 音频播放器
华为·音视频·鸿蒙
特立独行的猫a4 天前
uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台
uni-app·开源·harmonyos·鸿蒙·影视