前言

默认情况下，Toast 会出现在靠近底部的位置。这对大多数场景已经够用，但当页面结构复杂、底部有导航栏，或者你想让提示更接近操作区域时，位置控制就变得非常重要。

这个案例集中演示顶部、中间和底部三种位置写法，适合用来理解 bottom 参数的实际含义。

效果说明

页面上有三个连续按钮：

• 顶部 Toast
• 中间 Toast
• 底部 Toast

点击不同按钮，会在不同垂直位置显示提示。这样做的目的，不是鼓励你到处乱放 Toast，而是帮助你建立“什么时候需要偏移位置”的判断标准。

完整代码

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

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

  build() {
    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 不只是能不能显示，还包括显示在哪里更合理。位置控制本身不复杂，关键在于你是否能根据页面结构做出克制而稳定的选择。