highlight: ascetic
theme: cyanosis

前言

• BasicLibrary是一個基于API 11封裝的基本庫
• 未來的計劃是將其打造成一個通用的UI組件+基本工具組件扭倾，目前正在完善UI組件，大家如果組件有什么需求，可以盡管提哦
• BasicLibrary項目地址
• BasicLibrary的openHarmony三方庫中心倉

文章系列

• HarmonyOS基本工具封裝——BasicLibrary的基本使用(一)
• HarmonyOS基本UI封裝——標題欄組件NavBar封裝與使用(二)
• HarmonyOS基本UI封裝——Cell單元格組件封裝與使用(三)

簡介

鴻蒙基本庫封裝住册，提升鴻蒙開發(fā)效率

安裝

ohpm install @peakmain/library

使用

一、Dialog 彈出框

dialog 彈出框.gif

導入依賴

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

1. 默認彈窗

基本布局

  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,

  })

顯示彈窗

this.confirm.open()

2.提示彈窗

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

3.彈窗(無標題)

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

二滓玖、Loading加載

loading 加載.gif

導入依賴

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

1. 默認Loading

基本布局繪制

  title: string = "加載中..."
  isVertical: boolean = true//默認是垂直方向
  loadingColor: ResourceColor = Color.White//默認加載progress顏色為白色
  textColor: ResourceColor = Color.White//默認文本顏色為白色 
  backgroundResourceColor: ResourceColor = "rgba(0,0,0,0.46)"http://默認背景顏色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: () => { //監(jiān)聽取消事件
      this.resetData()
    }
  })

開啟loading

this.loading.open()

2. 自定義加載文案

 this.title = "數據加載中..."
 this.loading.open()

3. 水平方向

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

4. 自定義顏色(背景顏色、文本顏色势篡、加載顏色)

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

三翩肌、List列表

List 列表.gif

導入依賴

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

1. 基本使用

//數據源
@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方法即可

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("執(zhí)行了getNewData..." + isRefresh)
   const tmp = await this.getData(isRefresh)
   if (isRefresh) {
      this.arr = tmp
   } else {
      this.arr.push(...tmp)
   }
}
getData(isRefresh: boolean) {
   console.log("執(zhí)行了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); // 執(zhí)行完成后調用 resolve
      }, 2000);
   });
}

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

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