鸿蒙使用 @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方法。

目录
相关文章
|
2天前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
|
2月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
42 1
|
2月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
64 0
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
5月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
5月前
|
缓存 JavaScript 前端开发
如何理解 SAP UI5 的 sap.ui.define 函数?
如何理解 SAP UI5 的 sap.ui.define 函数?
|
5月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作