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

运行结果:

相关推荐
Ray_19974 小时前
Arkts加载网页url的pdf发票黑屏问题
鸿蒙
森之鸟3 天前
DevEco Studio 6.0.0 元服务页面跳转失败
鸿蒙
Quarkn3 天前
鸿蒙原生应用ArkUI之自定义List下拉刷新动效
list·harmonyos·arkts·鸿蒙·arkui
HarmonyOS小助手6 天前
【上新啦】HarmonyOS官方模板优秀案例 (第2期:新闻行业 · 综合新闻)
harmonyos·鸿蒙·鸿蒙生态
humors2217 天前
鸿蒙示例代码使用心得
华为·实战·harmonyos·鸿蒙·项目·huawei·实操
九丘教育8 天前
【华为仓颉编程语言】运行第一个仓颉程序
华为·鸿蒙·仓颉编程语言·仓颉·仓颉语言
长弓三石9 天前
鸿蒙网络编程系列61-仓颉版基于TCP实现最简单的HTTP服务器
网络·harmonyos·鸿蒙·仓颉
HarmonyOS小助手13 天前
餐饮服务与软件创新的融合:解析海底捞 APP 的 Flutter 鸿蒙开发之路
harmonyos·鸿蒙·鸿蒙生态
鸿蒙开发工程师—阿辉17 天前
HarmonyOS 应用拉起系列(一):应用与元服务互通方式
华为·harmonyos·arkts·鸿蒙
俺不理解18 天前
纯血鸿蒙 AudioRenderer+AudioCapturer+RingBuffer 实现麦克风采集+发声
音频·鸿蒙·录音·播放·纯血鸿蒙