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

运行结果:

相关推荐
森之鸟17 小时前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
程序员潘Sir19 小时前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙
程序员潘Sir2 天前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
HarmonyOS小助手2 天前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手3 天前
HEIF:更高质量、更小体积,开启 HarmonyOS 图像新体验
harmonyos·鸿蒙·鸿蒙生态
leon_teacher7 天前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
开发小能手嗨啊8 天前
鸿蒙开发进阶(HarmonyOS)
harmonyos·鸿蒙·鸿蒙开发·开发教程·纯血鸿蒙·南向开发·北向开发
HarmonyOS小助手8 天前
CodeGenie 的 AI 辅助调优让你问题定位效率大幅提升
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手8 天前
《音频焦点管理》最佳实践:让鸿蒙应用中的每一段声音,都不被打扰
harmonyos·鸿蒙·鸿蒙生态