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

运行结果:

相关推荐
行者968 小时前
Flutter适配OpenHarmony:国际化i18n实现中的常见陷阱与解决方案
开发语言·javascript·flutter·harmonyos·鸿蒙
俩毛豆9 小时前
华为的“天工计划”是什么
华为·harmonyos·鸿蒙·搜索·小艺
行者9610 小时前
Flutter在鸿蒙平台实现自适应步骤条组件的完整指南
flutter·harmonyos·鸿蒙
行者9612 小时前
Flutter与OpenHarmony深度整合:打造高性能自定义图表组件
flutter·harmonyos·鸿蒙
行者9612 小时前
Flutter适配OpenHarmony:高效数据筛选组件的设计与实现
开发语言·前端·flutter·harmonyos·鸿蒙
kirk_wang13 小时前
当Flutter的并发利器遇上鸿蒙:flutter_isolate的OHOS适配之旅
flutter·移动开发·跨平台·arkts·鸿蒙
wei_shuo14 小时前
最佳实践 - ArkTS 驱动鸿蒙元服务开发:从界面布局到交互逻辑,打造多功能决策类元服务
arkts·鸿蒙·元服务
行者9615 小时前
OpenHarmony Flutter 搜索体验优化实战:打造高性能跨平台搜索组件
flutter·harmonyos·鸿蒙
行者961 天前
Flutter跨平台开发:颜色选择器适配OpenHarmony
flutter·harmonyos·鸿蒙
行者962 天前
Flutter鸿蒙跨平台开发:实现高性能可拖拽排序列表组件
flutter·harmonyos·鸿蒙