文章目录
- 前言
- 页面目标
- 完整代码
- 关键代码讲解
- 1. `duration` 直接决定提示停留时间
- 2. 时长其实是在表达信息等级
- 3. 默认时长适合快速接入
- 设计建议
- 总结
前言
同样是提示信息，显示 1 秒、2 秒还是 3 秒，用户的感受差别其实很大。太短，用户来不及看；太长，又会显得拖沓。Toast的时长设置看似只是一个数字，背后其实对应的是信息优先级和阅读负担。
这个案例把不同显示时长放在一个页面里做并列演示，非常适合拿来建立一套项目内的提示规范。
页面目标
案例提供四个按钮，分别展示：
- 1500ms 的短提示
- 3000ms 的长提示
- 系统默认时长
- 1000ms 的极短提示
通过这种横向对比，你可以明显感受到不同提示时长对节奏的影响。
完整代码
import{promptAction}from'@kit.ArkUI'import{DEMO_CARD_COLOR}from'./types'@Entry@Componentstruct ToastDurationControl{@StateisShow:boolean=truebuild(){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 就不再是随手一写的小功能，而会变成一套有节奏感的反馈系统。
