【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,
	           	  })
	          }
	        }
		 }         
    }
  }
}
相关推荐
阿豪学编程11 小时前
面试题map/unordered相关
数据结构
武藤一雄11 小时前
19个核心算法(C#版)
数据结构·windows·算法·c#·排序算法·.net·.netcore
梦想的颜色12 小时前
mongoTemplate + Java 增删改查基础介绍
数据结构·数据库·mysql
叶小鸡13 小时前
小鸡玩算法-力扣HOT100-堆
数据结构·算法·leetcode
LUVK_15 小时前
第七章查找
数据结构·c++·考研·算法·408
khalil102015 小时前
代码随想录算法训练营Day-31贪心算法 | 56. 合并区间、738. 单调递增的数字、968. 监控二叉树
数据结构·c++·算法·leetcode·贪心算法·二叉树·递归
数智化精益手记局16 小时前
人员排班管理软件的自动化功能解析:解决传统手工人员进行排班管理耗时长的难题
运维·数据结构·人工智能·信息可视化·自动化·制造·精益工程
LeocenaY17 小时前
C语言面试题总结
c语言·开发语言·数据结构
睡觉就不困鸭18 小时前
第11天 删除有序数组中的重复项 II
数据结构
im_AMBER18 小时前
Leetcode 160 最小覆盖子串 | 串联所有单词的子串
开发语言·javascript·数据结构·算法·leetcode