鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI

简介: 采用的方法是在修改数据时,通过`this.dArray.splice(index, 1, this.dArray[index])`替换指定元素,强制数组更新并反映到界面上。

由于业务的复杂,所以我们把相关UI抽离出来。但是数据变化了,没法更新UI

@Builder

MyGridLayout() {

  }



通过日志打印发现数据的确是更新了,但是UI就没没办法,如何解决呢

@Entry
@Component
struct Page35 {
  // @State sArray: boolean[] = [false, false, false, false]
  @State dArray: boolean[][]= [[false, false], [false, false]]
  build() {
    Column() {
      ForEach(this.dArray,(item:[],index:number)=>{
        ForEach(item,(item_2:boolean,index_2:number)=>{
          Button('第'+index+'组,第'+index_2+'个,value:'+item_2)
            .onClick(()=>{
              this.dArray[index][index_2] = !item_2//修改数据
              // 让数组元素地址变更,从而触发重绘
              // this.dArray[index] = [... this.dArray[index]]//方案一:拷贝数组
              // this.dArray[index] = JSON.parse(JSON.stringify(item))//方案二:序列化后再反序列化。
              //方案三:@Observed+@ObjectLink 参考官方文档
              this.dArray.splice(index, 1, this.dArray[index]);//方案四:替换指定索引元素
            })
        })
      })
    }
    .width('100%')
  }


我这边是通过方案四解决的,改变数据的时候,手动调用splice方法。


————————————————


                           版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

                     

原文链接:https://blog.csdn.net/u011404611/article/details/140111175


目录
打赏
0
0
0
0
3
分享
相关文章
70. [HarmonyOS NEXT 实战案例九] 旅游景点网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的旅游景点网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的旅游景点应用。
67 1
|
1月前
|
69.[HarmonyOS NEXT 实战案例九] 旅游景点网格布局(上)
本教程将详细讲解如何使用HarmonyOS NEXT中的GridRow和GridCol组件实现旅游景点网格布局。通过网格布局,我们可以以美观、规整的方式展示各种旅游景点信息,为用户提供良好的浏览体验。
60 1
|
1月前
|
UED
68.[HarmonyOS NEXT 实战案例八] 电影票务网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的电影票务网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的电影票务应用。
58 1
67.[HarmonyOS NEXT 实战案例八] 电影票务网格布局(上)
在移动应用开发中,电影票务应用是一个常见的场景,用户可以通过应用查看正在热映的电影信息,并进行选座购票等操作。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现电影票务应用中的电影列表网格布局,帮助开发者掌握网格布局的基本用法和实现技巧。
61 1
|
1月前
|
UED
66.[HarmonyOS NEXT 实战案例七] 健身课程网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的健身课程网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的健身课程应用。
65 1
65. [HarmonyOS NEXT 实战案例七] 健身课程网格布局(上)
本教程将介绍如何使用HarmonyOS NEXT的GridRow和GridCol组件实现健身课程的网格布局展示。健身课程网格布局是一种常见的UI设计模式,适用于展示各种健身课程信息,包括课程名称、教练信息、课程时长、难度级别等。通过网格布局,用户可以快速浏览多个课程,并根据自己的需求选择合适的课程。
62 1
|
1月前
64.[HarmonyOS NEXT 实战案例六] 餐饮菜单网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的餐饮菜单网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的餐饮菜单应用。
69 0
|
1月前
|
63.[HarmonyOS NEXT 实战案例六] 餐饮菜单网格布局(上)
在移动应用开发中,餐饮类应用的菜单展示是一个常见的需求。一个设计良好的菜单布局不仅能够清晰地展示菜品信息,还能提升用户的点餐体验。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个美观实用的餐饮菜单网格布局。
59 0
|
1月前
|
UED
62. [HarmonyOS NEXT 实战案例五] 社交应用照片墙网格布局(下)
在上一篇教程中,我们学习了如何使用GridRow和GridCol组件实现基本的社交应用照片墙网格布局。本篇教程将在此基础上,深入探讨如何优化布局、添加交互功能,以及实现更多高级特性,打造一个功能完善的社交应用照片墙。
55 0
61.[HarmonyOS NEXT 实战案例五] 社交应用照片墙网格布局(上)
社交应用中的照片墙是一种常见的UI设计模式,它以网格形式展示用户的照片集合,让用户可以浏览、分享和互动。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个美观、灵活的社交应用照片墙网格布局。 在本教程中,我们将学习如何设计照片墙的数据结构、如何使用GridRow和GridCol组件创建网格布局、如何实现照片卡片,以及如何处理不同尺寸的照片。通过本教程,你将掌握使用GridRow和GridCol组件实现复杂网格布局的技巧。
58 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问