文章目录前言效果说明完整代码关键代码讲解1. bottom 控制的是相对底部的偏移2. 三种位置适合的场景并不一样3. 位置控制不要过度个性化实战建议总结前言默认情况下Toast会出现在靠近底部的位置。这对大多数场景已经够用但当页面结构复杂、底部有导航栏或者你想让提示更接近操作区域时位置控制就变得非常重要。这个案例集中演示顶部、中间和底部三种位置写法适合用来理解bottom参数的实际含义。效果说明页面上有三个连续按钮顶部 Toast中间 Toast底部 Toast点击不同按钮会在不同垂直位置显示提示。这样做的目的不是鼓励你到处乱放 Toast而是帮助你建立“什么时候需要偏移位置”的判断标准。完整代码import{promptAction}fromkit.ArkUIimport{DEMO_CARD_COLOR}from./typesEntryComponentstruct ToastPositionPatterns{StateisShow:booleantruebuild(){Column(){if(this.isShow){Column(){Text(Toast 位置演示).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:20})Button(顶部 Toast).width(100%).height(48).backgroundColor(#FF6B6B).borderRadius({topLeft:12,topRight:12}).fontColor(#FFFFFF).fontSize(15).onClick((){promptAction.showToast({message:显示在顶部,duration:2000,bottom:80%})})Button(中间 Toast).width(100%).height(48).backgroundColor(#4D96FF).fontColor(#FFFFFF).fontSize(15).onClick((){promptAction.showToast({message:显示在中间,duration:2000,bottom:50%})})Button(底部 Toast).width(100%).height(48).backgroundColor(#6BCB77).borderRadius({bottomLeft:12,bottomRight:12}).fontColor(#FFFFFF).fontSize(15).onClick((){promptAction.showToast({message:显示在底部默认,duration:2000})})Text(通过 bottom 参数可以控制 Toast 距离底部的距离数值越大位置越接近顶部。).fontSize(13).fontColor(#999999).margin({top:20}).padding(12).backgroundColor(#F8F8F8).borderRadius(8)}.width(100%).backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding({top:24,bottom:24,left:24,right:24})}}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}关键代码讲解1.bottom控制的是相对底部的偏移例如顶部提示promptAction.showToast({message:显示在顶部,duration:2000,bottom:80%})这里的bottom: 80%不是“距离顶部 80%”而是距离底部偏移 80%。偏移越大Toast 越靠上。2. 三种位置适合的场景并不一样顶部适合避免遮挡底部操作栏中间适合做演示或强调但业务里要克制使用底部最常规也最安全一般项目里底部是默认首选。只有当页面底部已经很拥挤或者 Toast 和当前操作区距离太远时才考虑调整位置。3. 位置控制不要过度个性化很多团队在接触这个参数后会想给每个页面做不同位置提示。但从可用性角度看这通常不是好事。提示如果总在不同位置跳来跳去用户很难形成稳定预期。建议把位置控制当成“局部修正手段”而不是视觉表现手段。实战建议在真实业务里优先遵守下面这套原则没有特殊需求使用默认底部位置底部存在悬浮按钮、底部栏时再考虑上移中间或顶部提示只在确实有遮挡问题时使用整个项目尽量维持一致的提示位置规范总结这个案例说明了Toast不只是能不能显示还包括显示在哪里更合理。位置控制本身不复杂关键在于你是否能根据页面结构做出克制而稳定的选择。