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

前言

文章系列

简介

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

安装

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
})
相关推荐
周胡杰7 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶1 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶2 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少3 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
coder_pig17 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶17 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界19 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor19 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo20 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore20 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos