【Harmony】【鸿蒙】List列表View如何刷新内部的自定义View的某一个控件

创建自定义View

typescript 复制代码
@Component
export struct TestView{
	@State leftIcon?:Resource = $r('app.media.leftIcon')
	@State leftText?:Resource | string = $r('app.string.leftText')
	@State rightText?:Resource | string = $r('app.string.rightText')
	@State rightIcon?:Resource = $r('app.media.rightIcon')
  	build() {
   	 	RelativeContainer() {
   	 		.....
   	 	}
   	}
}

创建一个Dialog作为示例

typescript 复制代码
@CustomDialog
@Component
export struct TestDialog {
  @State itemBean: Array<TestBean> = new Array()
  aboutToAppear(): void {
  	// 创建几个条目
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  }
  build() {
    RelativeContainer() {
    	 Button("点击修改List的值让其刷新")
    	 .onClick(()=>{
    	 	// 点击修改List的值让其刷新
    	 	....
    	 )
		 List({ space: 0, initialIndex: 0 }) {
	       ForEach(this.itemBean, (item: TestBean, index: number) => {
	         ListItem() {
	          	  TestView({
	          	  	leftIcon:item.leftIcon,
	          	  	leftText:item.leftText,
	          	  	rightText:item.rightText,
	          	  	rightIcon:item.rightIcon,
	           	  })
	          }
	        }
		 }         
    }
  }
}

上面示例是一个类式Android RecycleView把条目封装成一个简单的自定义View

当点击Button时,我要改要让List里的条目刷新。

之前偿试过各种方法比如下面的

typescript 复制代码
// 方法1: 把整个列表数组更新 无效果
this.itemBean = [... this.itemBean]  

// 方法2:改变某个索引让其更新,无效果
this.itemBean[2] = JSON.parse(JSON.stringify(this.itemBean[2]))

// 方法3:删除并重新赋值 无效果
this.itemText.splice(2,1,this.itemBean[2])

// 方法4:把itemBean 全部移除再添加 无效果
let copyItemBean = [... this.itemBean] 
this.itemBean .pop()
this.itemBean .pop()
this.itemBean .pop()
this.itemBean .pop()
this.itemBean = copyItemBean 

如果在 itemBean 后面添加一个View又有效果,,经过各种尝试想刷新某个item里的某个值一直失败。

经过几个小时的苦思若想,感觉直接使用itemBean肯定是有问题,如下图

正确使用方法如下 将item改为this.itemBean[index]再使用上面方法1 方法2,方法3 就可以刷新一个条目或者所有的条目

typescript 复制代码
@CustomDialog
@Component
export struct TestDialog {
  @State itemBean: Array<TestBean> = new Array()
  aboutToAppear(): void {
  	// 创建几个条目
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  	this.itemBean.push(new TestBean())
  }
  build() {
    RelativeContainer() {
    	 Button("点击修改List的值让其刷新")
    	 .onClick(()=>{
    	 	// 点击修改List的值让其刷新
    	 	....
    	 )
		 List({ space: 0, initialIndex: 0 }) {
	       ForEach(this.itemBean, (item: TestBean, index: number) => {
	         ListItem() {
	          	  TestView({
	          	  	leftIcon:this.itemBean[index].leftIcon,
	          	  	leftText:this.itemBean[index].leftText,
	          	  	rightText:this.itemBean[index].rightText,
	          	  	rightIcon:this.itemBean[index].rightIcon,
	           	  })
	          }
	        }
		 }         
    }
  }
}
相关推荐
豆沙沙包?6 分钟前
2026年--Lc334-2130. 链表最大孪生和(链表转数组)--java版
java·数据结构·链表
Python_Study20252 小时前
制造业数据采集系统选型指南:从技术挑战到架构实践
大数据·网络·数据结构·人工智能·架构
SmoothSailingT3 小时前
408每日一题——数据结构
数据结构·考研·408
im_AMBER5 小时前
Leetcode 99 删除排序链表中的重复元素 | 合并两个链表
数据结构·笔记·学习·算法·leetcode·链表
s砚山s6 小时前
代码随想录刷题——二叉树篇(十三)
数据结构·算法
ulias2126 小时前
AVL树的实现
开发语言·数据结构·c++·windows
黎雁·泠崖6 小时前
二叉树知识体系全梳理:从基础到进阶一站式通关
c语言·数据结构·leetcode
蜕变菜鸟6 小时前
JS的Object.keys()和sort()排序的用法
数据结构·算法
镜中人★6 小时前
408数据结构考纲知识点(更新中)
数据结构
杜子不疼.7 小时前
【LeetCode30_滑动窗口 + 哈希表】:三招搞定“串联所有单词的子串”
数据结构·算法·哈希算法