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

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

安装

要安装 BasicLibrary,可以使用以下命令:

bash 复制代码
ohpm install @peakmain/library

BasicLibrary 功能有哪些

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

案例演示

List 列表

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

1. 导入依赖
javascript 复制代码
import { PkList } from '@peakmain/library/Index'
2. 参数
3. 看一个例子
typescript 复制代码
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 //共几页

  async getNewData(isRefresh:boolean){
    console.log("执行了getNewData..." + isRefresh)
    const tmp = await this.getData(isRefresh)
    if (isRefresh) {
      this.arr = tmp
    } else {
      this.arr.push(...tmp)
    }
  }

  getData(isRefresh:boolean){
    console.log("执行了getData..." + isRefresh)
    return new Promise<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 () => {
          await this.getNewData(true)
        },
        renderItem: (item) => {
          this.renderItem(item)
        },
        onLoad: async () => {
          await this.getNewData(false)
        }
      }).margin({
        bottom: 20
      })
    }
  }
}

Skeleton骨架屏

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

导入依赖
typescript 复制代码
import {  PkSkeleton } from '@peakmain/library';
参数
示例代码
typescript 复制代码
PkSkeleton({
  count: 3,
  showAvatar: this.showAvatar
})

权限工具类

导入依赖

typescript 复制代码
import PermissionUtils from '@peakmain/library/src/main/ets/utils/PermissionUtils';

创建request对象

typescript 复制代码
request: PermissionUtils = new PermissionUtils()

检查是否有权限

方法如下:

typescript 复制代码
this.request.hasPermissions(权限数组)

示例如下

typescript 复制代码
async checkPermission(){
  let result =
    await this.request.checkPermissions(['ohos.permission.LOCATION', "ohos.permission.APPROXIMATELY_LOCATION"])
  if (result) {
    promptAction.showToast({ message: "已授予位置权限" })
  }
  return result
}

请求权限

typescript 复制代码
this.request.requestPermission(权限数组)

示例如下

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

打开应用权限设置页面

typescript 复制代码
this.request.openPermissionsInSystemSettings()

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

gitee 上获取 BasicLibrary

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

相关推荐
轻口味4 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
无处安放的波澜7 分钟前
【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
李洋-蛟龙腾飞公司32 分钟前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据文件资产迁移
分布式·华为·harmonyos
大土豆的bug记录1 小时前
鸿蒙历史搜索功能:tag标签根据文字宽度自动换行 展示更多
华为·harmonyos
轻口味1 小时前
【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
华为·harmonyos
凯子坚持 c2 小时前
编程新选择:深入了解仓颉语言的优雅与高效
华为
一个处女座的程序猿O(∩_∩)O3 小时前
开源鸿蒙 5.0 正式版发布
华为·harmonyos
程序猿会指北4 小时前
【鸿蒙(HarmonyOS)性能优化指南】内存分析器Allocation Profiler
性能优化·移动开发·harmonyos·openharmony·arkui·组件化·鸿蒙开发
生产队队长6 小时前
项目练习:element-ui的valid表单验证功能用法
前端·vue.js·ui
程序猿会指北6 小时前
【鸿蒙(HarmonyOS)性能优化指南】启动分析工具Launch Profiler
c++·性能优化·harmonyos·openharmony·arkui·启动优化·鸿蒙开发