鸿蒙（HarmonyOS）开发指南：UI封装、Cell单元格组件封装与使用

不入流HarmonyOS开发

已于 2024-06-20 15:23:41 修改

阅读量1k

点赞数 16

分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： harmonyos 华为鸿蒙 android 前端 ui

于 2024-06-20 15:18:48 首次发布

本文链接：https://blog.csdn.net/m0_70749039/article/details/139833663

版权

鸿蒙同时被 3 个专栏收录

659 篇文章 6 订阅

订阅专栏

HarmonyOS

652 篇文章 4 订阅

订阅专栏

OpenHarmony

647 篇文章 6 订阅

订阅专栏

简介

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

安装

ohpm install @peakmain/library

使用

二、Cell 单元格的使用

导入依赖

import {CellItemComponent, GroupCellComponent } from '@peakmain/library/Index'

布局使用，单个单元格，可直接使用CellItemComponent组件示例代码如下

  let settingData=new CellBean()
  @Builder
  CellItemBuilder(item: CellBean) {
    CellItemComponent({
            cellBean: item
         })
      }
    })
  }
  
 builder(){
    this.CellItemBuilder(this.settingData)
 }

接下来只需要定义CellBean实体类即可

1. 基本使用

设置文本

settingData.cellName = "会员信息"

设置描述信息

 settingData.cellDesc = "会员信息、头像、昵称"

示例代码如下:

 let settingData = new CellBean()
 settingData.cellName = "会员信息"
 settingData.cellDesc = "会员信息、头像、昵称"

2. 隐藏右边箭头，展示右边文本

隐藏箭头方法

settingData.isArrow = false

显示右边文本

settingData.rightText = "去开启"//显示右边箭头

示例代码如下:

let settingData = new CellBean()
settingData.cellName = "您已关闭新消息通知"
settingData.cellDesc = "可能会错过订单信息、优惠活动等"
settingData.rightText = "去开启"//显示右边箭头
settingData.isArrow = false
settingData.itemClick=()=>{
 promptAction.showToast({
   message:"点击了消息通知"
 })
}
settingData.rightClick=()=>{
  promptAction.showToast({
    message:"去开启"
})

3. 隐藏右边箭头，展示右边文本，并修改右边文本字体颜色

隐藏右边箭头，展示右边文本,参考第2个用法
修改右边字体颜色

settingData.rightTextColor = $r("app.color.color_A9AAAA")

示例代码如下

let settingData = new CellBean()
settingData.cellName = "关于BasicLibrary"
settingData.rightText = ""
settingData.rightTextColor = $r("app.color.color_A9AAAA")
settingData.isArrow = true

4. 动态修改数据，如动态获取版本号

  aboutToAppear(): void {
    AppManager.getAppVersionNameSync().then((result) => {
      let settingData = new CellBean()
      settingData.cellName = "关于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所有内容都不支持深层数据更新 UI渲染

想要更新更深层次的嵌套数据，方案如下

直接给第二层的属性赋值，此时不更新，直接将第一层对象，重新new一下重新赋值
更新第二层的数据之前，捎带手更新一下第一层的数据

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

鸿蒙HarmonyOS Next全套学习资料←点击领取！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

鸿蒙（HarmonyOS NEXT）最新学习路线