HarmonyOS基本UI封装——顶部Toast、骨架屏(六)前言 BasicLibrary是一个基于API 12封装的

前言

BasicLibrary是一个基于API 12封装的基本库
未来的计划是将其打造成一个通用的UI组件+基本工具组件，目前正在完善UI组件，大家如果组件有什么需求，可以尽管提哦
BasicLibrary项目地址
BasicLibrary的openHarmony三方库中心仓

文章系列

简介

鸿蒙基本库封装，提升鸿蒙开发效率

安装

ohpm install @peakmain/library

一、NavBar扩展

背景

因有大哥希望导航栏支持两个按钮，于是我这边对NavBar进行了扩展

导入依赖

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

Toast提示工具.gif

导入依赖

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
})