前言
- BasicLibrary是一个基于API 12封装的基本库
- 未来的计划是将其打造成一个通用的UI组件+基本工具组件，目前正在完善UI组件，大家如果组件有什么需求，可以尽管提哦
- BasicLibrary项目地址
- BasicLibrary的openHarmony三方库中心仓
文章系列
- HarmonyOS基本工具封装——BasicLibrary的基本使用(一)
- HarmonyOS基本UI封装——标题栏组件NavBar封装与使用(二)
- HarmonyOS基本UI封装——Cell单元格组件封装与使用(三)
- HarmonyOS基本UI封装——Dialog 弹出框、loading加载和List下拉刷新加载更多（四）
- HarmonyOS基本UI封装——ImageLoader 图片上传(五)
简介
鸿蒙基本库封装，提升鸿蒙开发效率
安装
ohpm install @peakmain/library
一、NavBar扩展
背景
- 因有大哥希望导航栏支持两个按钮，于是我这边对NavBar进行了扩展
[图片上传失败...(image-50f619-1729820549472)]
导入依赖
import NavBar from "@peakmain/library/src/main/ets/components/title/NavBar"
参数
- 新增leftClick和showLeftClose两个参数
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| title | string | 设置导航栏标题 |
| titleBold | boolean | 标题是否加粗，true表示加粗，false表示不加粗。默认是true |
| titleColor | ResourceColor | 设置标题字体颜色，默认字体颜色是 #272a2b |
| backgroundColorResource | ResourceColor | 设置背景颜色，默认背景颜色是 Color.White |
| leftImage | PixelMap | ResourceStr | DrawableDescriptor | null | 设置左边返回箭头资源，为空时不显示 |
| right | string | 右边文本内容 |
| rightImage | PixelMap | ResourceStr | DrawableDescriptor | null | 设置右边图片资源，为空时不显示 |
| rightClick | () => void | 设置右边图片或者文本的点击事件 |
| leftClick | void = () | 左边返回点击事件，默认处理是返回上一个页面 |
| showLeftClose | boolean | 是否显示关闭按钮，默认为false |
二、顶部Toast
[图片上传失败...(image-8cac9-1729820549473)]
导入依赖
import { ToastComponent } from "@peakmain/library"
参数
| 参数名 | 参数类型 | 名称 |
|---|---|---|
| content | string | Toast提示的文案 |
| type | ToastType | Toast提示的类型，不同类型提示的背景颜色不同 默认时间ToastType.Normal |
| duration | number | 动画加载时长 |
ToastType枚举类型
| 枚举类型 | 背景颜色 | 说明 |
|---|---|---|
| NORMAL | #272a2b | 默认情况 |
| SUCCESS | #579572 | 成功 |
| ERROR | #9F4B48 | 错误 |
示例代码
CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效
- 声明需要显示内容的CustomDialogController
dialogController: CustomDialogController = new CustomDialogController({
builder: ToastComponent({
content: this.toastStatus == 0 ? "默认情况" : (this.toastStatus == 1 ? "正确情况" : "错误情况"),
type: this.toastStatus == 0 ? ToastType.NORMAL : (this.toastStatus == 1 ? ToastType.SUCCESS : ToastType.ERROR),
}),
customStyle: true,
alignment: DialogAlignment.Top,
autoCancel: false
})
- 需要显示的地方直接调用open即可
this.dialogController.open()
三、Skeleton骨架屏
Skeleton骨架屏.gif
导入依赖
import { PkSkeleton } from '@peakmain/library';
参数
| 参数名 | 参数类型 | 名称 |
|---|---|---|
| showAvatar | boolean | 是否显示头像，默认不显示 |
| count | number | 骨架屏显示数量，默认是3 |
示例代码
PkSkeleton({
count: 3,
showAvatar: this.showAvatar
})
