ArkUI Toast：一句话提示，别抢用户的路

今天我们用 Toast 做三个轻提示：默认提示、停留久一点的提示，以及避开底部按钮的提示。

Toast 的定位很简单，它只负责告诉用户“刚才那一下发生了什么”。保存成功、复制成功、网络慢一点，这类信息用它刚好。要是需要用户做决定，就别让 Toast 硬扛，后面我们会用确认弹窗处理。

准备页面

我们先准备一个展示页，页面里放三组按钮。每个按钮只触发一次提示，不保存状态，也不做业务处理。

核心调用是这一句：

this.getUIContext().getPromptAction().showToast({
  message: '已保存草稿'
})

message 是提示内容。内容越短越好，最好一眼能看完。

默认提示

第一组只传 message，让系统使用默认停留时间。

this.getUIContext().getPromptAction().showToast({
  message: '已保存草稿'
})

这类写法适合“保存成功”“已复制”这种短反馈。用户看一眼就能继续操作，不需要被挡住。

停留久一点

第二组加上 duration。

this.getUIContext().getPromptAction().showToast({
  message: '网络有点慢，稍后再试',
  duration: 3000
})

我们把时间设成 3000ms，是为了让异常提示更容易看清楚。这里不要写太长，复杂说明更适合放在页面内容里。

避开底部区域

第三组加上 bottom。

this.getUIContext().getPromptAction().showToast({
  message: '已复制到剪贴板',
  duration: 2000,
  bottom: 160
})

如果页面底部有按钮、输入框或导航，把 Toast 往上抬一点会舒服很多。这个值没有固定标准，我们按页面底部控件高度来调。

你平时最常把 Toast 用在哪些地方？保存、复制、网络错误，还是其它场景？这个问题很适合拿自己的项目对照一下。

完整代码

@Entry
@Component
struct ArkUIToastDemo {
  private showDefaultToast(): void {
    this.getUIContext().getPromptAction().showToast({
      message: '已保存草稿'
    })
  }

  private showLongToast(): void {
    this.getUIContext().getPromptAction().showToast({
      message: '网络有点慢，稍后再试',
      duration: 3000
    })
  }

  private showBottomToast(): void {
    this.getUIContext().getPromptAction().showToast({
      message: '已复制到剪贴板',
      duration: 2000,
      bottom: 160
    })
  }

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  toastCard(title: string, desc: string) {
    Column({ space: 6 }) {
      Column({ space: 6 }) {
        Text(title)
          .fontSize(17)
          .fontWeight(FontWeight.Bold)
          .fontColor('#111827')
        Text(desc)
          .fontSize(13)
          .fontColor('#6B7280')
          .lineHeight(20)
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .padding(16)
    .borderRadius(14)
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: '#E5E7EB' })
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI Toast')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('一句话提示，别抢用户的路')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('Toast 适合告诉用户“刚才那一步发生了什么”。它不会要求用户做决定，也不应该塞很长的说明。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('默认提示：一句话就够了', '不传 duration 时使用系统默认停留时间，适合保存成功、复制成功这类轻反馈。')
        this.toastCard('保存草稿', '点击按钮后，只给一句短提示，不打断当前页面。')
        Button('显示默认 Toast')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#2563EB')
          .borderRadius(18)
          .height(38)
          .padding({ left: 18, right: 18 })
          .onClick(() => this.showDefaultToast())

        this.sectionTitle('停留久一点：给异常提示留点时间', 'duration 可以控制展示时长。内容仍然要短，复杂问题更适合放到页面里解释。')
        this.toastCard('网络提示', '这里把停留时间设为 3000ms，让用户有时间看清楚。')
        Button('显示较长 Toast')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#0F766E')
          .borderRadius(18)
          .height(38)
          .padding({ left: 18, right: 18 })
          .onClick(() => this.showLongToast())

        this.sectionTitle('调整位置：避开底部操作区', 'bottom 可以把 Toast 往上抬一点，避免盖住底部按钮或导航。')
        this.toastCard('复制反馈', '底部有按钮时，把提示抬高一些，读起来更舒服。')
        Button('显示抬高 Toast')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor('#C2410C')
          .borderRadius(18)
          .height(38)
          .padding({ left: 18, right: 18 })
          .onClick(() => this.showBottomToast())
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8FAFC')
  }
}