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

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

由于业务的复杂,所以我们把相关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方法。

目录
相关文章
|
5天前
|
缓存 搜索推荐 索引
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
38 7
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
|
16天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
54 3
|
29天前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
101 3
|
7天前
|
自然语言处理 开发者
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容,你将学习如何使用 Text 组件显示文本、格式化文本样式,以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。
30 4
「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
|
2天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
20 10
|
2天前
|
UED 开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(布局约束)
在HarmonyOS next中,ArkTS提供了一系列通用属性来设置组件的布局约束,使开发者能够灵活控制组件的布局行为。本文详细解读了这些属性,包括`space`、`justifyContent`、`alignItems`、`layoutWeight`、`matchParent`和`wrapContent`,并通过示例代码展示了它们的使用方法。这些属性有助于实现响应式布局、动态界面调整和提升用户体验。
18 5
|
10天前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式,包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理,开发者可以更高效地构建复杂的用户界面。此外,文章还提供了布局优化技巧,帮助提升应用性能。
72 4
|
13天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
56 8
|
10天前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起,实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念(如子组件层叠、Positioned 组件和对齐属性),以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法,帮助你构建更加精美和实用的 Flutter 应用。
95 2
|
16天前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
35 1