鸿蒙UI开发——Toast即时提示框的使用

1、概 述

Toast提示又称即时反馈，是一种临时性的消息提示框，用于向用户显示简短的操作反馈或状态信息。它通常在屏幕的底部或顶部短暂弹出，随后在一段时间后自动消失。即时反馈的主要目的是提供简洁、不打扰的信息反馈，避免干扰用户当前的操作流程。效果如下：

2、注意事项

使用Toast时，一般我们有几个原则需要遵循，从而让用户有更好的体验。

• 合理使用弹出场景，避免频繁的提醒用户。

  可以针对一些常用场景使用即时反馈操作，例如，当用户执行某个操作时及时结果反馈，用来提示用户操作是否成功或失败；或是当应用程序的状态发生变化时提供状态更新等。

• 注意文本的信息密度，即时反馈展示时间有限，应当避免长文本的出现。

  Toast控件的文本应该清晰可读，字体大小和颜色应该与应用程序的主题相符。除此之外，即时反馈控件本身不应该包含任何可交互的元素，如按钮或链接。

• 杜绝强制占位和密集弹出的提示。

  即时反馈作为应用内的轻量通知，应当避免内容布局占用界面内的其他元素信息，如遮盖弹出框的展示内容，从而迷惑用户弹出的内容是否属于弹出框。再或者频繁性的弹出信息内容，且每次弹出之间无时间间隔，影响用户的正常使用。也不要在短时间内频繁弹出新的即时反馈替代上一个。即时反馈的单次显示时长不要超过 3 秒钟，避免影响用户正常的行为操作。

• 遵从系统默认弹出位置。

  即时反馈在系统中默认从界面底部弹出，距离底部有一定的安全间距，作为系统性的应用内提示反馈，请遵守系统默认效果，避免与其他弹出类组件内容重叠。特殊场景下可对内容布局进行规避。

即时反馈提供了两种显示模式，分别为DEFAULT（显示在应用内）、TOP_MOST（显示在应用之上）。

在TOP_MOST类型的Toast显示前，会创建一个全屏大小的子窗（手机上子窗大小和主窗大小一致），然后在该子窗上计算Toast的布局位置，最后显示在该子窗上。

下面是分别设置DEFAULT和TOP_MOST模式的示例代码：

import {promptAction} from '@kit.ArkUI';@Entry@Componentstruct Index {  build() {    Column({space: 10}) {      TextInput()      Button() {        Text("DEFAULT类型Toast")          .fontSize(20)          .fontWeight(FontWeight.Bold)      }      .width('100%')      .onClick(()=>{        promptAction.showToast({          message:"ok，我是DEFAULT toast",          duration:2000,          showMode: promptAction.ToastShowMode.DEFAULT,          bottom:80        })      })      Button() {        Text("TOPMOST类型Toast")          .fontSize(20)          .fontWeight(FontWeight.Bold)      }      .width('100%')      .onClick(()=>{        promptAction.showToast({          message:"ok，我是TOP_MOST toast",          duration:2000,          showMode: promptAction.ToastShowMode.TOP_MOST,          bottom:85        })      })    }  }}

3、使用Toast

我们可以通过使用UIContext中的getPromptAction方法获取当前UI上下文关联的PromptAction对象，再通过该对象调用showToast创建并显示文本提示框。

效果如下：

代码如下（5~6行、9~12行）：​​​​​​​

import { PromptAction } from '@kit.ArkUI'@Entry@Componentstruct ToastExample {  private toastMsg: string = '你已成功加入Harmony自习室！';  private uiContext: UIContext = this.getUIContext()  private promptAction: PromptAction = this.uiContext.getPromptAction()  private showToast() {    this.promptAction.showToast({      message: this.toastMsg,      duration: 2000    });  }  build() {    Column() {      Button('显示Toast').fontSize(20)        .onClick(() => this.showToast())    }.height('100%').width('100%').justifyContent(FlexAlign.Center)  }}

一般情况下，我们只需要关注Toast内容以及停留时间。分别可以通过message与duration来控制（上述代码10行与11行）。

当然，除了这两个基本的内容外，我们还可以设置其他的属性，可以设置的属性罗列如下：

message	string | Resource	显示的文本信息。 说明：默认字体为'Harmony Sans'，不支持设置其他字体。
duration	number	默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。
bottom	string | number	设置弹窗底部边框距离导航条的高度，ToastShowMode.TOP_MOST模式下，软键盘拉起时，如果bottom值过小，toast要被软键盘遮挡时，会自动避让至距离软键盘80vp处。ToastShowMode.DEFAULT模式下，软键盘拉起时，会上移软键盘的高度。默认值：80vp 说明：当底部没有导航条时，bottom为设置弹窗底部边框距离窗口底部的高度。设置对齐方式alignment后，bottom不生效。
showMode	ToastShowMode	设置弹窗是否显示在应用之上。默认值：ToastShowMode.DEFAULT，默认显示在应用内。
alignment	Alignment	对齐方式。默认值：undefined，默认底部偏上位置。
offset	Offset	在对齐方式上的偏移。默认值：{ dx: 0, dy: 0 }，默认没有偏移。 说明：只支持设置px类型的数值，如需设置vp，可以将vp改成px传入。
backgroundColor	ResourceColor	文本提示框背板颜色默认值：Color.Transparent 说明：当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。
textColor	ResourceColor	文本提示框文本颜色默认值：Color.Black
backgroundBlurStyle	BlurStyle	文本提示框背板模糊材质默认值：BlurStyle.COMPONENT_ULTRA_THICK 说明：设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。
shadow	ShadowOptions | ShadowStyle	文本提示框背板阴影默认值：ShadowStyle.OUTER_DEFAULT_MD