前言

同样是提示信息，显示 1 秒、2 秒还是 3 秒，用户的感受差别其实很大。太短，用户来不及看；太长，又会显得拖沓。Toast 的时长设置看似只是一个数字，背后其实对应的是信息优先级和阅读负担。

这个案例把不同显示时长放在一个页面里做并列演示，非常适合拿来建立一套项目内的提示规范。

页面目标

案例提供四个按钮，分别展示：

• 1500ms 的短提示
• 3000ms 的长提示
• 系统默认时长
• 1000ms 的极短提示

通过这种横向对比，你可以明显感受到不同提示时长对节奏的影响。

完整代码

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

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

  build() {
    Column() {
      if (this.isShow) {
        Column() {
          Text('Toast 时长控制')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 16 })

          Row() {
            Button('短提示 (1.5s)')
              .width('45%')
              .height(48)
              .backgroundColor('#6BCB77')
              .borderRadius(12)
              .fontColor('#FFFFFF')
              .fontSize(14)
              .onClick(() => {
                promptAction.showToast({
                  message: '短时 Toast (1500ms)',
                  duration: 1500
                })
              })

            Button('长提示 (3s)')
              .width('45%')
              .height(48)
              .backgroundColor('#4D96FF')
              .borderRadius(12)
              .fontColor('#FFFFFF')
              .fontSize(14)
              .onClick(() => {
                promptAction.showToast({
                  message: '长时 Toast (3000ms)',
                  duration: 3000
                })
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .margin({ bottom: 16 })

          Row() {
            Button('默认时长')
              .width('45%')
              .height(48)
              .backgroundColor('#FFA500')
              .borderRadius(12)
              .fontColor('#FFFFFF')
              .fontSize(14)
              .onClick(() => {
                promptAction.showToast({
                  message: '默认时长 Toast'
                })
              })

            Button('极短提示')
              .width('45%')
              .height(48)
              .backgroundColor('#9B59B6')
              .borderRadius(12)
              .fontColor('#FFFFFF')
              .fontSize(14)
              .onClick(() => {
                promptAction.showToast({
                  message: '1000ms',
                  duration: 1000
                })
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .margin({ bottom: 24 })

          Column() {
            Text('时长参考：')
              .fontSize(13)
              .fontColor('#999999')
              .margin({ bottom: 6 })
            Text('短操作反馈：1000-1500ms')
              .fontSize(12)
              .fontColor('#AAAAAA')
              .margin({ bottom: 3 })
            Text('一般提示：1500-2500ms')
              .fontSize(12)
              .fontColor('#AAAAAA')
              .margin({ bottom: 3 })
            Text('重要提示：2500-3500ms')
              .fontSize(12)
              .fontColor('#AAAAAA')
          }
          .width('100%')
          .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. duration 直接决定提示停留时间

案例里最核心的区别，全部落在 duration 参数上。

例如短提示：

promptAction.showToast({
  message: '短时 Toast (1500ms)',
  duration: 1500
})

再比如长提示：

promptAction.showToast({
  message: '长时 Toast (3000ms)',
  duration: 3000
})

这意味着 Toast 的节奏控制非常直接，不需要额外状态机，也不需要自己写隐藏计时器。

2. 时长其实是在表达信息等级

建议不要把时长看成一个纯视觉参数，它更接近信息权重配置：

• 低权重提示，用短时间即可
• 中等提示，保证能看清即可
• 高权重提示，可以适当延长停留时间

如果你把所有提示都设成 3 秒以上，用户会觉得页面总有东西挂着不走，体验会变沉。

3. 默认时长适合快速接入

案例中的“默认时长”没有传 duration。这在早期接入时很方便，尤其是你还没有沉淀设计规范的时候。

但到了正式项目阶段，建议还是按场景显式声明时长。这样做有两个好处：

• 交互规范更稳定
• 团队成员更容易理解这条提示的意图

设计建议

如果你的页面里提示很多，最好建立统一约定，比如：

• 成功保存：1500ms
• 一般提示：2000ms
• 风险提醒或失败反馈：2500ms 以上

统一之后，产品体验会更整齐，用户也更容易形成预期。

总结

这个案例真正讲的不是四个按钮，而是如何给轻提示设定合理停留时间。一旦你把时长和信息等级对应起来，Toast 就不再是随手一写的小功能，而会变成一套有节奏感的反馈系统。