【入门到实战】OpenHarmony开发：Cell 单元格

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

介绍

单元格为列表中的单个展示项

导入依赖

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

参数

单个单元格，可直接使用CellItemComponent组件

CellBean实体类

示例

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

接下来只需要定义CellBean实体类即可,如以下代码

1. 基本使用

设置描述信息

 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渲染
想要更新更深层次的嵌套数据， 方案如下

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