【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,
	           	  })
	          }
	        }
		 }         
    }
  }
}
相关推荐
不会就选b15 分钟前
数据结构之排序
数据结构
我不会起名字3223 小时前
一天一道算法题(34):回溯法的经典例题(子集)
java·数据结构·python·算法·golang·深度优先·力扣
Logic1015 小时前
C语言/数据结构位运算题解:异或XOR找出货船中的“独特载货量“——只出现一次的数字
c语言·数据结构·数组·位运算·时间复杂度·算法题·异或性质
彧azz6 小时前
DFS与BFS:图遍历的两大核心算法
数据结构·学习·算法·深度优先·广度优先
青山木7 小时前
Hot 100 --- 最长递增子序列
java·数据结构·算法·leetcode·动态规划
土司大王8 小时前
LeetCode hot100——33.搜索旋转排序数组:Java 二分模板与 O(log n) 实现
数据结构·算法·leetcode
程序员阿鹏9 小时前
如何实现MySQL分库分表?
数据结构·数据库·sql·mysql·缓存
ysu_031410 小时前
08-二叉树遍历:四种方式详解
c语言·数据结构·算法·leetcode
Lyyaoo.10 小时前
【二分查找】【中等】搜索二维矩阵/排序数组的第一位和最后位置/搜索旋转排序数组/旋转排序数组中的最小值
java·数据结构·算法
Lyyaoo.11 小时前
【二分查找】【困难】寻找两个有序数组的中位数
java·数据结构·算法