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

运行结果:

相关推荐
ZZZMMM.zip1 小时前
基于鸿蒙PC与鸿蒙Flutter框架构建AI本地生活服务平台
人工智能·flutter·华为·harmonyos·鸿蒙
星释11 小时前
鸿蒙智能体开发实战:23.常见问题
服务器·华为·ai·harmonyos·鸿蒙·智能体
星释14 小时前
鸿蒙智能体开发实战:39.鸿蒙壁纸大师 - 前端卡片显示与交互优化
前端·华为·交互·harmonyos·鸿蒙·火山引擎
●VON18 小时前
HarmonyKit | 鸿蒙开发展望:HarmonyKit 未来路线图与社区共建
华为·单元测试·harmonyos·鸿蒙
绝世番茄19 小时前
Column 与 if/else 条件渲染:动态子组件的布局行为
华为·harmonyos·鸿蒙
千逐6821 小时前
鸿蒙实战:自由流转与跨设备迁移——基于 ContinueAbility 与应用接续的完整落地指南
华为·harmonyos·鸿蒙
xd18557855521 小时前
鸿蒙PC时代的AI快递查询应用:基于鸿蒙Flutter框架的跨端创新实践
人工智能·flutter·华为·harmonyos·鸿蒙
xd1855785551 天前
鸿蒙PC平台下基于Flutter框架的AI历史对话应用开发实践
人工智能·华为·harmonyos·鸿蒙
星释1 天前
鸿蒙智能体开发实战:41.智能体上架审核规范与合规指南
华为·ai·harmonyos·鸿蒙
ZZZMMM.zip1 天前
基于鸿蒙PC与鸿蒙Flutter框架的AI紧急求助应用开发实践
人工智能·flutter·华为·harmonyos·鸿蒙