鸿蒙开发：自定义一个Toast

前言

代码案例基于Api13。

系统的toast已经可以满足大部分的场景了，而且使用起来也是十分的简单，可以修改很多的可配置属性，简单的使用代码如下：

登录后复制

promptAction.showToast({ message: "toast提示" })

• 1.

但是偏偏有一点实现不了，那就是圆角度数的设置，还有就是和icon结合使用的场景也无法满足，为了更好的适配UI的设计图，那么自定义一个Toast是在所难免的。

简单的实现效果如下，可以设置常见的圆角，背景，字体颜色大小等属性，也支持各种的位置设置，以及上下左右icon设置，如果提供的任然无法满足需求，你可以通过自定义组件形式，自己绘制即可，相对来说，还是非常的灵活多变。

快速使用

目前已经上传到了中心仓库，大家可以远程进行依赖，中心仓库地址：

 https://ohpm.openharmony.cn/#/cn/detail/@abner%2Ftoast

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

登录后复制

ohpm install@abner/toast

• 1.

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

登录后复制

"dependencies": { "@abner/toast": "^1.0.0"}

• 1.

初始化

用来统一配置toast的样式，比如背景，圆角，字体颜色，大小等，如果默认样式已经满足，可不初始化，建议在AbilityStage里进行初始化。

登录后复制

toastInit({ toastAttribute: { backgroundColor: Color.Black, fontColor: Color.White } })

• 1.

代码调用

1、普通提示

登录后复制

toast("普通提示")

• 1.

2、更改背景

登录后复制

toast("更改背景", { backgroundColor: Color.Red, fontColor: Color.White })

• 1.

3、更改圆角度数

登录后复制

toast("更改圆角度数", { borderRadius: 5 })

• 1.

4、更改文字大小

登录后复制

toast("更改文字大小", { fontSize: 20 })

• 1.

5、居中位置

登录后复制

toast("居中位置", { alignment: ToastAlignment.Center })

• 1.

6、居上位置

登录后复制

toast("居上位置", { alignment: ToastAlignment.Top })

• 1.

7、居下位置

登录后复制

toast("居下位置", { alignment: ToastAlignment.Bottom })

• 1.

8、任意位置

登录后复制

toast("任意位置", { offsetX: 20, offsetY: 20 })

• 1.

9、上面Icon

登录后复制

toast("上面Icon", {
  topIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    left: 40,
    right: 40,
    bottom: 10
  }
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

10、下面Icon

登录后复制

toast("下面Icon", {
  bottomIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    left: 40,
    right: 40,
    top: 10
  }
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

11、左面Icon

登录后复制

toast("左面Icon", {
  leftIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    right: 40,
    left: 40,
    top: 20,
    bottom: 20
  }
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

12、右面Icon

登录后复制

toast("右面Icon", {
  rightIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    right: 40,
    left: 40,
    top: 20,
    bottom: 20
  }
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

13、左右Icon

登录后复制

toast("左右Icon", {
  leftIcon: $r("app.media.app_icon"),
  rightIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    right: 40,
    left: 40,
    top: 20,
    bottom: 20
  }
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

14、自定义视图

登录后复制

toast("自定义视图", {
  backgroundColor: Color.Transparent,
  padding: 0,
  view: wrapBuilder(ToastView)
})

• 1.
• 2.
• 3.
• 4.
• 5.

属性介绍

ToastConfig属性

属性	类型	概述
isUserMainWindow	boolean	是使用主window还是子window
toastAttribute	ToastAttribute	toast配置属性

ToastAttribute属性

属性	类型	概述
msg	string/Resource	弹出内容
duration	number	弹出时间
autoCancel	boolean	点击外部是否隐藏
alignment	ToastAlignment	弹出位置
fontSize	number / string/ Resource	字体大小
textAlign	TextAlign	字体的居中方式
fontColor	ResourceColor	字体颜色
backgroundColor	ResourceColor	背景颜色
padding	Padding/Length/ LocalizedPadding	内边距
borderRadius	Length /BorderRadiuses /LocalizedBorderRadiuses	圆角度数
shadow	ShadowOptions / ShadowStyle	阴影
marginLeft	Length	距离左边
marginRight	Length	距离右边
offsetX	Length	x坐标
offsetY	Length	y坐标
leftIcon	PixelMap / ResourceStr / DrawableDescriptor	左边icon
topIcon	PixelMap / ResourceStr / DrawableDescriptor	上边icon
rightIcon	PixelMap / ResourceStr / DrawableDescriptor	右边icon
bottomIcon	PixelMap / ResourceStr / DrawableDescriptor	下边icon
iconWidth	Length	icon宽度
iconHeight	Length	icon高度
iconMarginTop	Length	icon距离顶部
iconMarginBottom	Length	icon距离底部
iconMarginLeft	Length	icon距离左边
iconMarginRight	Length	icon距离右边
view	WrappedBuilder	自定义组件

相关总结

如果整个项目的toast样式都一样，直接在初始化中设置统一的属性即可，针对单独不一样的效果，可以单独设置。

目前未在代码中封装常见的成功，失败还有loading视图，因为已经暴露的icon设置，可直接传递实现类似的功能，如果代码中提供的无法满足，可以通过自定义组件的形式实现。