Skip to content

Toast 轻提示 ​

自持可见性与计时的墨色胶囊浮层。指令式接口 show(text) / hide(),计时到期自动隐藏。

契约源:lh-ui-core/specs/toast.json · 黄金用例:lh-ui-core/cases/toast.json(6 条,已翻译为 hypium 测试)

端侧落点说明

spec 的指令式接口 show / hide / tick 在端侧落点为方法 + 内部计时: show(text) 使其可见并重置计时(setTimeout(duration)),计时到期自动隐藏并触发 onClose;hide() 立即隐藏但不触发 onClose。ArkUI 不提供子组件实例引用, 宿主通过 LhToastController 句柄调用方法:

typescript
private toastCtl: LhToastController = new LhToastController()

build() {
  Stack() {
    // ...页面内容
    LhToast({ type: LhToastType.Success, position: LhToastPosition.Top, controller: this.toastCtl })
  }
}

组件须作为页面 Stack 的最后子节点挂载,层级取 zIndex.toast。

类型与位置 ​

type 非 default 时在文字前绘制对应语义色圆点;position 决定在可用区域内的定位。

9:41Toast 类型与位置
操作成功已保存到本地网络连接失败

HTML 模拟预览(鸿蒙 / ArkUI 外观),非真机渲染

typescript
this.toastCtl.show('操作成功')

API ​

Props ​

属性说明类型默认值
type语义类型;非 default 时在文字前绘制语义色圆点LhToastTypeDefault
duration自动隐藏时长(毫秒)number2000
position在可用区域内的定位;上下两端留 spacing.xl 边距LhToastPositionCenter
onClose计时到期自动隐藏时触发;hide() 主动隐藏不触发() => void空函数
controller宿主调用句柄(可选),注册 show / hideLhToastController?null

方法(经 controller 转发) ​

方法说明
show(text)显示提示文字并重置计时;到期自动隐藏并触发 onClose
hide()立即隐藏,不触发 onClose

LhToastType ​

值圆点色
Default无圆点
Successcolor.success.default
Warningcolor.warning.default
Dangercolor.danger.default
Infocolor.info.default

LhToastPosition ​

值端侧落点
Top顶部对齐,上留 spacing.xl 边距
Center居中,无留白
Bottom底部对齐,下留 spacing.xl 边距

胶囊底色取 color.ink(中性黑),文字取 color.onPrimary。

令牌对照 ​

令牌用途
toast.fontSize提示文字字号(14)
toast.paddingHorizontal / toast.paddingVertical胶囊内边距(16 / 8vp)
toast.borderRadius胶囊圆角
toast.gap语义圆点与文字间距(8vp)
color.ink / color.onPrimary胶囊底色 / 文字色
color.{success,warning,danger,info}.default语义圆点色
shadow.base胶囊阴影
zIndex.toast浮层层级(2000)
spacing.xl上下两端边距

黄金用例对照 ​

cases/toast.json 的 6 条断言与 hypium 测试的对应关系(entry/src/test/Toast.test.ets):

case id断言本地测试
show-makes-visibleshow 使其可见capsule_uses_ink_and_on_primary_tokens
auto-hides-after-duration计时到期自动隐藏dimensions_use_tokens(计时由 setTimeout 承载)
tick-before-duration-keeps-visible到期前保持可见dimensions_use_tokens
hide-is-silenthide 不触发 onClosezindex_and_edge_margin_use_tokens
success-type-uses-success-token成功类型圆点取成功色success_type_uses_success_token
hidden-emits-no-commands隐藏态不发射命令default_type_has_no_dot

另有暗色专项:dark_colors_come_from_dark_tokens / dimensions_are_identical_in_dark_mode。 运行:DevEco Studio 右键 entry/src/test → Run Tests。