highlight: ascetic
theme: cyanosis
前言
- BasicLibrary是一個(gè)基于API 11封裝的基本庫(kù)
- 未來(lái)的計(jì)劃是將其打造成一個(gè)通用的UI組件+基本工具組件绒北，目前正在完善UI組件，大家如果組件有什么需求迅耘，可以盡管提哦
- BasicLibrary項(xiàng)目地址
- BasicLibrary的openHarmony三方庫(kù)中心倉(cāng)
文章系列
簡(jiǎn)介
鴻蒙基本庫(kù)封裝涡相，提升鴻蒙開發(fā)效率
安裝
ohpm install @peakmain/library
使用
二趴酣、Cell 單元格的使用
image.png
導(dǎo)入依賴
import {CellItemComponent, GroupCellComponent } from '@peakmain/library/Index'
布局使用，單個(gè)單元格，可直接使用CellItemComponent組件
示例代碼如下
let settingData=new CellBean()
@Builder
CellItemBuilder(item: CellBean) {
CellItemComponent({
cellBean: item
})
}
})
}
builder(){
this.CellItemBuilder(this.settingData)
}
接下來(lái)只需要定義CellBean實(shí)體類即可
1. 基本使用
設(shè)置文本
settingData.cellName = "會(huì)員信息"
設(shè)置描述信息
settingData.cellDesc = "會(huì)員信息芜抒、頭像、昵稱"
示例代碼如下:
let settingData = new CellBean()
settingData.cellName = "會(huì)員信息"
settingData.cellDesc = "會(huì)員信息托启、頭像宅倒、昵稱"
2. 隱藏右邊箭頭，展示右邊文本
隱藏箭頭方法
settingData.isArrow = false
顯示右邊文本
settingData.rightText = "去開啟"http://顯示右邊箭頭
示例代碼如下:
let settingData = new CellBean()
settingData.cellName = "您已關(guān)閉新消息通知"
settingData.cellDesc = "可能會(huì)錯(cuò)過(guò)訂單信息屯耸、優(yōu)惠活動(dòng)等"
settingData.rightText = "去開啟"http://顯示右邊箭頭
settingData.isArrow = false
settingData.itemClick=()=>{
promptAction.showToast({
message:"點(diǎn)擊了消息通知"
})
}
settingData.rightClick=()=>{
promptAction.showToast({
message:"去開啟"
})
3. 隱藏右邊箭頭拐迁，展示右邊文本，并修改右邊文本字體顏色
- 隱藏右邊箭頭疗绣，展示右邊文本,參考第2個(gè)用法
- 修改右邊字體顏色
settingData.rightTextColor = $r("app.color.color_A9AAAA")
示例代碼如下
let settingData = new CellBean()
settingData.cellName = "關(guān)于BasicLibrary"
settingData.rightText = ""
settingData.rightTextColor = $r("app.color.color_A9AAAA")
settingData.isArrow = true
4. 動(dòng)態(tài)修改數(shù)據(jù)线召，如動(dòng)態(tài)獲取版本號(hào)
aboutToAppear(): void {
AppManager.getAppVersionNameSync().then((result) => {
let settingData = new CellBean()
settingData.cellName = "關(guān)于BasicLibrary"
settingData.rightText = result
settingData.rightTextColor = $r("app.color.color_A9AAAA")
settingData.isArrow = true
let index = this.groupCellArray.findIndex((item) => item.title == "")
this.groupCellArray[index].cellBeanArray[0] = settingData
})
}
注：ArkTS所有內(nèi)容都不支持深層數(shù)據(jù)更新 UI渲染
想要更新更深層次的嵌套數(shù)據(jù)， 方案如下
- 直接給第二層的屬性賦值多矮，此時(shí)不更新缓淹，直接將第一層對(duì)象哈打，重新new一下重新賦值
- 更新第二層的數(shù)據(jù)之前，捎帶手更新一下第一層的數(shù)據(jù)
