前言
代码案例基于Api13。
系统的toast已经可以满足大部分的场景了,而且使用起来也是十分的简单,可以修改很多的可配置属性,简单的使用代码如下:
TypeScript
promptAction.showToast({ message: "toast提示" })
但是偏偏有一点实现不了,那就是圆角度数的设置,还有就是和icon结合使用的场景也无法满足,为了更好的适配UI的设计图,那么自定义一个Toast是在所难免的。
简单的实现效果如下,可以设置常见的圆角,背景,字体颜色大小等属性,也支持各种的位置设置,以及上下左右icon设置,如果提供的仍然无法满足需求,你可以通过自定义组件形式,自己绘制即可,相对来说,还是非常的灵活多变。
快速使用
目前已经上传到了中心仓库,大家可以远程进行依赖,中心仓库地址:
ohpm.openharmony.cn/#/cn/detail...
方式一:在Terminal窗口中,执行如下命令安装三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
建议:在使用的模块路径下进行执行命令。
TypeScript
ohpm install @abner/toast
方式二:在工程的oh-package.json5中设置三方包依赖,配置示例如下:
TypeScript
"dependencies": { "@abner/toast": "^1.0.0"}
初始化
用来统一配置toast的样式,比如背景,圆角,字体颜色,大小等,如果默认样式已经满足,可不初始化,建议在AbilityStage里进行初始化。
TypeScript
toastInit({ toastAttribute: { backgroundColor: Color.Black, fontColor: Color.White } })
代码调用
1、普通提示
TypeScript
toast("普通提示")
2、更改背景
TypeScript
toast("更改背景", { backgroundColor: Color.Red, fontColor: Color.White })
3、更改圆角度数
TypeScript
toast("更改圆角度数", { borderRadius: 5 })
4、更改文字大小
TypeScript
toast("更改文字大小", { fontSize: 20 })
5、居中位置
TypeScript
toast("居中位置", { alignment: ToastAlignment.Center })
6、居上位置
TypeScript
toast("居上位置", { alignment: ToastAlignment.Top })
7、居下位置
TypeScript
toast("居下位置", { alignment: ToastAlignment.Bottom })
8、任意位置
TypeScript
toast("任意位置", { offsetX: 20, offsetY: 20 })
9、上面Icon
TypeScript
toast("上面Icon", {
topIcon: $r("app.media.app_icon"),
borderRadius: 10,
padding: {
left: 40,
right: 40,
bottom: 10
}
})
10、下面Icon
TypeScript
toast("下面Icon", {
bottomIcon: $r("app.media.app_icon"),
borderRadius: 10,
padding: {
left: 40,
right: 40,
top: 10
}
})
11、左面Icon
TypeScript
toast("左面Icon", {
leftIcon: $r("app.media.app_icon"),
borderRadius: 10,
padding: {
right: 40,
left: 40,
top: 20,
bottom: 20
}
})
12、右面Icon
TypeScript
toast("右面Icon", {
rightIcon: $r("app.media.app_icon"),
borderRadius: 10,
padding: {
right: 40,
left: 40,
top: 20,
bottom: 20
}
})
13、左右Icon
TypeScript
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
}
})
14、自定义视图
TypeScript
toast("自定义视图", {
backgroundColor: Color.Transparent,
padding: 0,
view: wrapBuilder(ToastView)
})
属性介绍
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<Object[]> | 自定义组件 |
相关总结
如果整个项目的toast样式都一样,直接在初始化中设置统一的属性即可,针对单独不一样的效果,可以单独设置。
目前未在代码中封装常见的成功,失败还有loading视图,因为已经暴露了icon设置,可直接传递实现类似的功能,如果代码中提供的无法满足,可以通过自定义组件的形式实现。