使用LazyForEach渲染语法渲染组件,UI不刷新。

使用LazyForEach渲染语法渲染组件,组件仅显示一个或者空白

HarmonyOS
2024-06-11 20:58:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
wjmfzsz

Step 1 确保在代码中使用了LazyForEach的DataChangeListener对象的更新方法来触发页面更新。

Step 2 确保数据变化前后LazyForEach生成的子组件键值发生了变化。

异常代码示例

class MyDataSource implements IDataSource { 
 private listener: DataChangeListener 
 // 初始化数据列表 
 private dataArray: Array<{ 
   id: number, 
   val: String 
 }> = [{ id: 0, val: '/path/image0.png' }, { id: 1, val: '/path/image1.png' }, { 
   id: 2, 
   val: '/path/image2.png' 
 }] 
  
 public totalCount(): number { 
   return this.dataArray.length 
 } 
  
 public getData(index: number): any { 
   return this.dataArray[index] 
 } 
  
 registerDataChangeListener(listener: DataChangeListener): void { 
   this.listener = listener 
 } 
  
 unregisterDataChangeListener(listener: DataChangeListener): void { 
   this.listener = undefined 
 } 
  
 public changeSecondData(data: string): void { 
   this.dataArray[1].val = data 
   // 已经正常使用了onDataChanged函数通知了更新。 
   this.listener.onDataChange(1) 
 } 
} 
  
@Entry 
@Component 
struct MyComponent { 
 private data: MyDataSource = new MyDataSource() 
  
 build() { 
   List({ space: 3 }) { 
     ListItem() { 
       Text('change second value') 
     }.onClick(() => { 
       this.data.changeSecondData('new data') 
     }) 
  
     LazyForEach(this.data, (item) => { 
       ListItem() { 
         Text(item.val).fontSize(20).margin({ left: 10 }) 
       }.margin({ left: 10, right: 10 }) 
       // changeSecondData()函数中没有修改id的值,导致下面的键值在变化前后未发生变化。 
       // 可以修改键值生成器函数:item => JSON.stringify(item)或者在changeSecondData()函数中同步修改id的值。 
     }, item => item.id.toString()) 
   } 
 } 
}
分享
微博
QQ
微信
回复
2024-06-12 22:51:03
相关问题
class二次刷新渲染数组
624浏览 • 1回复 待解决
修改ForEach使用的数据对象,UI刷新
1294浏览 • 1回复 待解决
IF条件变化后UI刷新
585浏览 • 1回复 待解决
嵌套Class的属性变化无法触发UI渲染
171浏览 • 1回复 待解决
在Stage模型下如何主动重新渲染UI
3081浏览 • 1回复 已解决
ListItem 组件渲染错误空白内容
720浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
796浏览 • 1回复 待解决
组件状态修改与build渲染机制
726浏览 • 1回复 待解决
状态装饰器 ui刷新的问题
2292浏览 • 1回复 待解决
Web组件是否支持离屏渲染
1728浏览 • 0回复 待解决
HarmonyOS使用@ObjectLink 数据刷新
466浏览 • 2回复 待解决