🎯 目标
实现一个全局可调用的轻提示组件 CommonToast
,满足以下需求:
-
自动消失的顶部/底部通知
-
支持
success
/error
/info
/warning
等类型样式 -
支持自定义展示时长、图标、颜色等
-
全局调用:可直接调用
Toast.show('操作成功')
-
不干扰用户当前操作,无需手动关闭
🧱 展示形式示意
✅ 操作成功! (绿色底,3秒自动消失)
⚠ 网络异常,请重试 (黄色底)
❌ 删除失败! (红色底)
ℹ 当前为只读模式 (蓝色底)
🧰 组件实现:CommonToast.ets + ToastManager
✅ Toast 样式组件
@Component
export struct CommonToast {
@Prop message: string = ''
@Prop type: 'success' | 'error' | 'warning' | 'info' = 'info'
build() {
const bgColor = {
success: '#28C76F',
error: '#EA5455',
warning: '#FFA800',
info: '#007DFF'
}[this.type]
Row()
.width('100%')
.backgroundColor(bgColor)
.padding(12)
.alignItems(Vert