前言

很多页面并不需要一个正式弹窗。用户完成保存、复制成功、网络恢复、表单已提交，这类反馈只需要轻轻告诉用户“事情已经发生了”，不应该打断主流程。Toast 就是最适合承担这类即时反馈的能力。

这个案例非常基础，但基础恰恰最重要。因为很多项目把所有反馈都做成弹窗，结果页面动不动就被遮住，用户操作节奏被频繁打断。掌握 Toast 的边界，能直接改善产品体验。

这个案例做了什么

页面上只保留一个按钮，点击后调用 promptAction.showToast()，展示一条 2 秒自动消失的提示信息。虽然结构简单，但已经覆盖了 Toast 最核心的两个特征：

• 短时展示
• 自动消失

完整代码

import { promptAction } from '@kit.ArkUI'
import { DEMO_CARD_COLOR, DEMO_THEME_COLOR } from './types'

@Entry
@Component
struct ToastStarterGuide {
  @State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Toast 是轻量级的提示组件，短暂显示后自动消失，不打断用户操作流程。')
            .fontSize(14)
            .fontColor('#666666')
            .margin({ bottom: 20 })

          Button('显示 Toast 提示')
            .width('100%')
            .height(48)
            .backgroundColor(DEMO_THEME_COLOR)
            .borderRadius(12)
            .fontColor('#FFFFFF')
            .fontSize(16)
            .onClick(() => {
              promptAction.showToast({
                message: '这是一条基础 Toast 提示',
                duration: 2000
              })
            })

          Column() {
            Text('Toast 特点：')
              .fontSize(13)
              .fontColor('#999999')
              .margin({ bottom: 8 })
            Text('默认显示在屏幕底部中间')
              .fontSize(12)
              .fontColor('#AAAAAA')
              .margin({ bottom: 4 })
            Text('自动消失，无需手动关闭')
              .fontSize(12)
              .fontColor('#AAAAAA')
              .margin({ bottom: 4 })
            Text('用于非关键信息提示')
              .fontSize(12)
              .fontColor('#AAAAAA')
          }
          .width('100%')
          .margin({ top: 24 })
          .padding(12)
          .backgroundColor('#F8F8F8')
          .borderRadius(8)
        }
        .width('100%')
        .padding(24)
        .backgroundColor(DEMO_CARD_COLOR)
        .borderRadius(12)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F6FA')
    .padding(16)
  }
}

关键代码讲解

1. promptAction.showToast() 是入口

这一行就是整个案例的核心：

promptAction.showToast({
  message: '这是一条基础 Toast 提示',
  duration: 2000
})

其中最常用的两个参数就是：

• message：提示文案
• duration：显示时长，单位毫秒

对于绝大多数业务场景，这两个参数已经够用了。

2. 为什么它适合轻反馈

Toast 不会要求用户点击确认，也不会锁住当前界面。它更像一种“状态播报”，适合告诉用户：

• 提交成功
• 已复制
• 已加入收藏
• 网络已连接

如果你需要用户做判断，比如“是否删除”，那就不该用 Toast，而应该改成弹窗。

3. 文案长度要克制

轻提示的价值在于快。如果文案太长，用户来不及读完，提示已经消失；如果文案太重，又会让交互显得别扭。

更实用的写法是：

• 成功类：保存成功
• 失败类：提交失败，请重试
• 状态类：已切换到静音模式

尽量一句话讲清楚，不要把解释性长文塞进 Toast。

页面设计思路

这个案例在按钮下方补了一块说明区域，其目的不是装饰，而是帮助你在文档型页面里把组件边界说清楚。真实业务中，这块说明不一定要出现在页面里，但在教学场景中很有价值。

实战建议

项目里使用 Toast 时，建议遵守这几条：

• 成功反馈优先用 Toast，不要轻易弹框
• 时长一般控制在 1500 到 2500 毫秒之间
• 文案聚焦结果，不要写成长说明
• 同一时刻避免连续弹出太多条提示

总结

Toast 看上去只是个很小的能力，但它决定了很多细节体验。把它用对，你的页面会更轻、更顺，也更接近成熟产品的交互节奏。