【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,
	           	  })
	          }
	        }
		 }         
    }
  }
}
相关推荐
IT永勇20 分钟前
数据结构-栈
c语言·数据结构·嵌入式开发
Aczone2820 分钟前
嵌入式 数据结构学习 (六) 树、哈希表与内核链表
数据结构·学习·算法
定偶22 分钟前
进制转换小题
c语言·开发语言·数据结构·算法
R_AirMan3 小时前
深入浅出Redis:一文掌握Redis底层数据结构与实现原理
java·数据结构·数据库·redis
科大饭桶4 小时前
数据结构自学Day5--链表知识总结
数据结构·算法·leetcode·链表·c
小高Baby@4 小时前
map数据结构在Golang中是无序的,并且键值对的查找效率较高的原因
数据结构
北风toto4 小时前
python学习DataFrame数据结构
数据结构·python·学习
怀旧,6 小时前
【数据结构】8. 二叉树
c语言·数据结构·算法
凤年徐7 小时前
【数据结构与算法】203.移除链表元素(LeetCode)图文详解
c语言·开发语言·数据结构·算法·leetcode·链表·刷题