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

运行结果:

相关推荐
三声三视10 小时前
Electron+鸿蒙桌面应用实战:跨平台开发完全指南
electron·harmonyos·鸿蒙·桌面
阿钱真强道1 天前
19 小凌派 rk2206 鸿蒙 LiteOS-M 任务详解
华为·鸿蒙·任务·liteos·详解·rk2206·小凌派
阿钱真强道1 天前
18 小凌派 rk2206 鸿蒙 liteos 如何通过修改配置文件,编译不通的案例
华为·鸿蒙·编译·案例·liteos·rk2206
UnicornDev1 天前
【Flutter x HarmonyOS 6】魔方计时APP——记录页面的UI设计
flutter·ui·华为·harmonyos·鸿蒙
空中海2 天前
03 ArkUI 组件、状态与多端适配
鸿蒙
●VON2 天前
纯ArkUI实现7层拟物3D环形进度图:零依赖的视觉革命
服务器·3d·app·鸿蒙·von
aqi002 天前
一文速览 HarmonyOS 6.0.1 引入的十个新特性
android·华为·harmonyos·鸿蒙·harmony
三声三视2 天前
鸿蒙 ArkTS 国际化实战全攻略:多语言切换、格式本地化与 RTL 布局一步到位
华为·harmonyos·鸿蒙
空中海2 天前
04 Stage 模型、系统能力与数据架构
架构·鸿蒙
●VON2 天前
鸿蒙Widget开发实战:3张卡片实现桌面-App全链路同步
华为·app·harmonyos·鸿蒙·von