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

运行结果:

相关推荐
梦想不只是梦与想19 小时前
DevEco Studio:Debug界面按钮作用
鸿蒙·断点调试·debug调试
OH_TPC2 天前
HarmonyOS APP开发---“旅图“旅行摄影社区App,需要用到这个库
华为·harmonyos·鸿蒙
●VON2 天前
芯谱:面向 HarmonyOS PC 的 SPICE 电路仿真工作台
华为·鸿蒙·harmony·鸿蒙pc
贾伟康2 天前
【共创稿事节】收藏、历史、已做:用户行为数据的三层流转设计
鸿蒙
●VON2 天前
芯逻辑:面向 HarmonyOS PC 的图形化编程工作台
华为·harmonyos·鸿蒙·鸿蒙pc
行者-全栈开发3 天前
【共创稿事节】HarmonyOS 三方库工程化集成:从 ohpm 引入到三方库鸿蒙化的完整闭环
harmonyos·鸿蒙·har·三方库·ohpm·框架适配
贾伟康3 天前
【共创稿事节】一个 UserDataManager 管八类数据:Preferences 持久化的克制用法
java·服务器·前端·harmonyos·arkts·鸿蒙
万物智能信息科技3 天前
六轴传感器Motion驱动框架开发—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
驱动开发·华为·开源·harmonyos·鸿蒙
熊猫钓鱼>_>3 天前
端侧 NPU 轻量大模型推理接入笔记【鸿蒙心迹】
开发语言·笔记·华为·ai编程·harmonyos·鸿蒙
OH_TPC3 天前
【鸿蒙优选三方库】@ohos/ijkplayer:B 站同源播放器,啥格式都能播
华为·harmonyos·鸿蒙