鸿蒙开发:自定义一个Toast

前言

代码案例基于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设置,可直接传递实现类似的功能,如果代码中提供的无法满足,可以通过自定义组件的形式实现。

相关推荐
try again!25 分钟前
个性化音乐推荐系统
android·数据库·sqlite
别说我什么都不会41 分钟前
OpenHarmony-HDF驱动框架介绍及加载过程分析
harmonyos·领域驱动设计
开开心心就好42 分钟前
便捷开启 PDF 功能之旅,绿色软件随心用
android·java·windows·智能手机·eclipse·pdf·软件工程
轻口味1 小时前
【每日学点HarmonyOS Next知识】上下拉动作、图片预览、组件边距、this获取、svg旋转
华为·harmonyos·harmonyosnext
奔跑的露西ly1 小时前
【HarmonyOS NEXT】实现文字环绕动态文本效果
前端·javascript·html·harmonyos
云水-禅心1 小时前
鸿蒙编译框架插件HvigorPlugin接口的用法介绍
华为·harmonyos·插件·plugin·hvigor
轻口味1 小时前
【每日学点HarmonyOS Next知识】防截屏、加载不同View、函数传参、加载中效果、沉浸式底部状态栏
pytorch·深度学习·harmonyos·harmonyosnext
一个处女座的程序猿O(∩_∩)O1 小时前
鸿蒙Next开发与实战经验总结
华为·harmonyos
tangweiguo030519872 小时前
Kotlin高效实现 Android ViewPager2 顶部导航:动态配置与性能优化指南
android·kotlin
fantasy_42 小时前
Appium高级操作--ActionChains类、Toast元素识别、Hybrid App操作、手机系统API的操作
android·python·appium·自动化