【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.itemBeanindex再使用上面方法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,
	           	  })
	          }
	        }
		 }         
    }
  }
}
相关推荐
船厂电气自动化ai大模型13 分钟前
AI大模型与数学/第63课:矩阵定义、矩阵加法、标量乘法(逐级精讲)
数据结构·人工智能·深度学习·线性代数·算法
你压到我腿毛了66628 分钟前
C语言冒泡算法(Bubble sort)
c语言·数据结构·算法
xxwxx__1 小时前
C++ list 深度解析:从使用原理到模拟实现
开发语言·c++·list
铅笔小新z4 小时前
【数据结构】栈和队列
数据结构
shylyly_6 小时前
stack/queue中的deque
数据结构·c++·deque·双端队列·queue·stack·容器适配器
土司大王6 小时前
LeetCode hot100——缺失的第一个正数
数据结构·算法·leetcode
铅笔小新z7 小时前
【数据结构】顺序表和链表
数据结构·链表
不会就选b8 小时前
数据结构之栈的算法题(OJ)
linux·数据结构·算法
鹿角片ljp8 小时前
LeetCode 56:合并区间复盘|从排序思维到 List<int[]> 的简洁写法
算法·leetcode·list
漂流瓶jz8 小时前
UVA-1609 不公平竞赛 题解答案代码 算法竞赛入门经典第二版
数据结构·算法·链表·贪心·aoapc·算法竞赛入门经典·uva