HarmonyOS基本UI封装——Dialog 弹出框、loading加载和List下拉刷新加载更多（四）

前言

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

文章系列

简介

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

安装

dart 复制代码

ohpm install @peakmain/library

使用

一、Dialog 弹出框

导入依赖

typescript 复制代码

import { DialogComponent } from '@peakmain/library/Index';

1. 默认弹窗

基本布局

kotlin 复制代码

  title: string = '确认删除订单';
  message: string = '删除后将无法恢复，无法再次操作。';
  leftText: string = '取消';
  rightTextColor: ResourceColor = $r("app.color.color_194d53")//右边文本颜色,#194d53为默认文本颜色
  rightTextBold: boolean = true//右边文本是否加粗，默认是加粗
        
  confirm: CustomDialogController = new CustomDialogController({
    builder: DialogComponent({
      title: this.title,
      message: this.message,
      leftText: this.leftText,
      rightTextColor: this.rightTextColor,
      rightTextBold: this.rightTextBold,
      rightTextClick: () => {
        promptAction.showToast({
          message: `点击了${this.title}`,
        })
        this.confirm.close()
        this.resetDefault()
      }
    }),
    customStyle: true,
    alignment: DialogAlignment.Center,

  })

显示弹窗

typescript 复制代码

this.confirm.open()

2.提示弹窗

typescript 复制代码

this.title = "提示"
this.leftText = ""
this.rightTextColor = $r("app.color.color_1989fa")
this.confirm.open()

3.弹窗(无标题)

typescript 复制代码

this.title = ""
this.confirm.open()

二、Loading加载

导入依赖

typescript 复制代码

import { PkLoading } from '@peakmain/library/Index';

1. 默认Loading

基本布局绘制

typescript 复制代码

  title: string = "加载中..."
  isVertical: boolean = true//默认是垂直方向
  loadingColor: ResourceColor = Color.White//默认加载progress颜色为白色
  textColor: ResourceColor = Color.White//默认文本颜色为白色 
  backgroundResourceColor: ResourceColor = "rgba(0,0,0,0.46)"//默认背景颜色rgba(0,0,0,0.46)
  loading: CustomDialogController = new CustomDialogController({
    builder: PkLoading({
      title: this.title,
      isVertical: this.isVertical,
      loadingColor:this.loadingColor,
      textColor:this.textColor,
      backgroundResourceColor:this.backgroundResourceColor
    }),
    customStyle: true,
    isModal: false,//是否有蒙层,false表示没有蒙层，true表示有蒙层
    autoCancel: true,
    cancel: () => { //监听取消事件
      this.resetData()
    }
  })

开启loading

typescript 复制代码

this.loading.open()

2. 自定义加载文案

kotlin 复制代码

 this.title = "数据加载中..."
 this.loading.open()

3. 水平方向

kotlin 复制代码

this.isVertical = false
this.loading.open()

4. 自定义颜色(背景颜色、文本颜色、加载颜色)

typescript 复制代码

this.loadingColor=Color.Pink
this.textColor=Color.Pink
this.backgroundResourceColor=Color.Blue
this.loading.open()

三、List列表

导入依赖

typescript 复制代码

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

1. 基本使用

typescript 复制代码

//数据源
@State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
@State
page: number = 1 // 第几页
pageSize: number = 2 //共几页
PkList({
  dataSource: this.arr,//数据源
  finished: this.page >= this.pageSize,//是否已完成,分页加载
  renderItem: (item) => {
    this.renderItem(item)//每一条item布局
  },
}).margin({
  bottom: 20
})
@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)
}

2. 加载更多:调用onLoad方法即可

typescript 复制代码

PkList({
  dataSource: this.arr,//数据源
  finished: this.page >= this.pageSize,//是否已完成,分页加载
  renderItem: (item) => {
    this.renderItem(item)
  },
  onLoad: async () => {
    await this.getNewData(false)
  }
}).margin({
  bottom: 20
})
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);
   });
}

3. 下拉刷新:onRefresh方法即可

typescript 复制代码

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