鸿蒙开发超好用的 UI 组件和工具类库 BasicLibrary

大家好，我是 V 哥。你在学习HarmonyOS NEXT 开发吗，今天 V 哥给你推荐一款超好用的三方库BasicLibrary，BasicLibrary 是一个基于 API 11 封装的基本库，旨在提升鸿蒙开发效率。它包含了一些常用的 UI 组件和实用工具类，未来计划将其打造成一个通用的 UI 组件和基本工具组件库。

安装

要安装 BasicLibrary，可以使用以下命令：

ohpm install @peakmain/library

BasicLibrary 功能有哪些

先来看一下BasicLibrary都提供了哪些功能，一目了然。

案例演示

List 列表

先来看一个 List 列表，支持下拉刷新和加载更多。

1. 导入依赖

import{ PkList }from'@peakmain/library/Index'

2. 参数

3. 看一个例子

import{ NavBar, PkList }from'@peakmain/library/Index'

@Entry
@Component
struct ListPage{
  @State
  arr: String[]=['0','1','2','3','4','5','6','7','8','9','10']
  @State
  page:number=1// 第几页
  pageSize:number=2//共几页asyncgetNewData(isRefresh:boolean){console.log("执行了getNewData..."+ isRefresh)const tmp =awaitthis.getData(isRefresh)if(isRefresh){this.arr = tmp
    }else{this.arr.push(...tmp)}}getData(isRefresh:boolean){console.log("执行了getData..."+ isRefresh)returnnewPromise<String[]>((resolve)=>{let tmp: String[]setTimeout(()=>{if(!isRefresh){this.page++
          tmp =['new_0','new_1','new_2','new_3','new_4','new_5']}else{this.page =1
          tmp =['0','1','2','3','4','5','6','7','8','9','10']}console.log("当前页数："+this.page)resolve(tmp);// 执行完成后调用 resolve},2000);});}

  @Builder
  renderItem(item: object){Column(){Text(''+ item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(Color.White)}.margin({
      bottom:10,
      left:10, right:10}).border({
        width:0.5,
        color: Color.Red
      }).borderRadius(20)}build(){Column(){NavBar({
        title:"下拉刷新与加载更多"})PkList({
        dataSource:this.arr,
        finished:this.page >=this.pageSize,onRefresh:async()=>{awaitthis.getNewData(true)},renderItem:(item)=>{this.renderItem(item)},onLoad:async()=>{awaitthis.getNewData(false)}}).margin({
        bottom:20})}}}

Skeleton骨架屏

用于在内容加载过程中展示一组占位图形。

导入依赖

import{  PkSkeleton }from'@peakmain/library';

参数

示例代码

PkSkeleton({
  count:3,
  showAvatar:this.showAvatar
})

权限工具类

导入依赖

import PermissionUtils from'@peakmain/library/src/main/ets/utils/PermissionUtils';

创建request对象

request: PermissionUtils =newPermissionUtils()

检查是否有权限
方法如下：

this.request.hasPermissions(权限数组)

示例如下

asynccheckPermission(){let result =awaitthis.request.checkPermissions(['ohos.permission.LOCATION',"ohos.permission.APPROXIMATELY_LOCATION"])if(result){
    promptAction.showToast({ message:"已授予位置权限"})}return result
}

请求权限

this.request.requestPermission(权限数组)

示例如下

 result =awaitthis.request.requestPermission(['ohos.permission.LOCATION',"ohos.permission.APPROXIMATELY_LOCATION"])if(result){this.sLocation =true
  promptAction.showToast({ message:"已授予位置权限"})}else{this.sLocation =false
  promptAction.showToast({ message:"已拒绝位置权限"})}

打开应用权限设置页面

this.request.openPermissionsInSystemSettings()

以上简单给大家做了个演示，BasicLibrary 的更多功能，可以详细参考文档哦。

gitee 上获取 BasicLibrary

在gitee 上搜索 peakmain/BasicLibrary，即可获取该组件的的全部内容。关注威哥爱编程，一起学鸿蒙开发呀。