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