HarmonyOS 关于对象数组内容变更不会引起UI刷新
参考API的链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5
其中this.arrA[Math.floor(this.arrA.length/2)].c,@State无法观察到第二层的变化,但是ClassA被@Observed装饰,ClassA的属性的变化将被@ObjectLink观察到。
@Observed
export class FilterMaterialModel {
  cover: string
  id: string
  describe: string | null
  title: string
  fileAddress: string
  filterLocalPath: string
  downloadProgress: number
  constructor(
    cover: string,
    id: string,
    describe: string | null,
    title: string,
    fileAddress: string
  ) {
    this.cover = cover
    this.id = id
    this.describe = describe
    this.title = title
    this.fileAddress = fileAddress
    this.filterLocalPath = ''
    this.downloadProgress = 0
  }
}
List({ space: CommonConstants.MARGIN_16_PX }) {
  ForEach(this.curMaterialList, (material: FilterMaterialModel, index) => {
    ListItem() {
      FilterItemComponent({ material: material, isSelected: this.curMaterialIndex === index })
        .onClick(() => {
          this.curMaterialIndex = index
          this.lastCurMaterialIndex = index
          this.lastCurGroupIndex = this.curGroupIndex
          this.isSelectedFilter = true
          //如果此滤镜没有下载,则进行下载
          if (!material.filterLocalPath || material.filterLocalPath.length === 0) {
            this.downloadFilter(material, index)
          }
        })
    }
  }, (material: FilterMaterialModel) => material.id)
}
.width(CommonConstants.FULL_SIZE)
.height(CommonConstants.MARGIN_64_PX)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.alignListItem(ListItemAlign.Center)
@Component
struct FilterItemComponent {
  @ObjectLink material: FilterMaterialModel
  ...
  build() {
    Column() {
      Stack({ alignContent: Alignment.Center }) {
        Image(this.material.cover)
          .size({ width: CommonConstants.IMAGE_SIZE_44, height: CommonConstants.IMAGE_SIZE_44 })
          .borderRadius(4)
        if (this.material.downloadProgress > 0 && !this.material.filterLocalPath) {
          Progress({
            value: this.material.downloadProgress,
            total: 100,
            type: ProgressType.Ring
          })
            .color($r('app.color.white'))
            .backgroundColor($r('app.color.white_70'))
            .style({
              strokeWidth: 1.5
            })//.size({width: CommonConstants.IMAGE_SIZE_16, height: CommonConstants.IMAGE_SIZE_16})
            .size({ width: CommonConstants.IMAGE_SIZE_32, height: CommonConstants.IMAGE_SIZE_32 })
        } else if (!this.material.filterLocalPath || this.material.filterLocalPath.length === 0) {
          //如果此滤镜未下载
          Image($r('[HohemBaseLib].media.ic_download_16'))
            .size({ width: CommonConstants.IMAGE_SIZE_16, height: CommonConstants.IMAGE_SIZE_16 })
        }
        Text(`${this.material.downloadProgress ?? 0}`)
          .fontSize(CommonConstants.FONT_TIPS_12)
          .fontColor($r('app.color.highlight_deep'))
          .width(CommonConstants.IMAGE_SIZE_44)
          .textAlign(TextAlign.Center)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }
      .size({ width: CommonConstants.IMAGE_SIZE_44, height: CommonConstants.IMAGE_SIZE_44 })
      .borderRadius(4)
      .borderWidth(this.getBorderWidth())
      .borderColor(this.getBorderColor())
      .rotate({ angle: ScreenOrientationUtil.getInstance().getRotateAngle(this.screenRotationStatus) }
    }
  }
}
当变更对象数组数据时无法变更UI。
this.curMaterialList[0].downloadProgress = 100
this.curMaterialList[0].filterLocalPath ='xxxxx'
其中filterLocalPath和downloadProgress是在网络请求中不存在的字段,为了符合需求,新增的为何使用Observe和ObjectLink不能引起UI刷新。
        HarmonyOS
      
        赞
        
 收藏 0
 回答 1
 
        待解决
        
相关问题
 HarmonyOS 为什么@Link的属性变更不会触发UI刷新? 
1674浏览  • 1回复 待解决
HarmonyOS  @State修饰@observed装饰的对象, 对象里的数组改变, 不会触发ui刷新 
1300浏览  • 1回复 待解决
HarmonyOS ObjectLink修饰符对象的属性改变不能引起UI刷新 
1596浏览  • 1回复 待解决
HarmonyOS 对象A数组,对象A中又嵌套一个对象B数组,修改B中的属性UI,不刷新 
1808浏览  • 1回复 待解决
HarmonyOS 数组对象数据刷新 
1096浏览  • 1回复 待解决
UI预览不会自动刷新, 且刷新较慢 
2781浏览  • 1回复 待解决
HarmonyOS @State修饰的ResourceStr内容在变更的时候较大几率不会响应UI的变换 
781浏览  • 1回复 待解决
数组中元素变更如何触发刷新list? 
1155浏览  • 1回复 待解决
HarmonyOS flutter业务变更不被主项目托管 
905浏览  • 1回复 待解决
ForEach数组发生改变。UI没刷新 
2115浏览  • 1回复 待解决
HarmonyOS  @State赋相同值的时候,会引起组件的重新渲染吗? 
1232浏览  • 1回复 待解决
HarmonyOS 关于objectLink在数组对象中使用时,修改数据页面不刷新问题 
1953浏览  • 1回复 待解决
HarmonyOS 关于数组包裹对象中更新组件问题 
962浏览  • 1回复 待解决
HarmonyOS 如何让自定义类中的属性变化引起UI刷新? 
1342浏览  • 1回复 待解决
HarmonyOS @Observed装饰的类,构造了对象数组,那这个数组中对象的属性变化之后,能引起视图的更新吗 
2184浏览  • 1回复 待解决
HarmonyOS @State刷新不了数组里面包含类的字段刷新UI 
1088浏览  • 1回复 待解决
HarmonyOS 复杂数据类型变更,UI不刷新,该如何解决? 
1597浏览  • 1回复 待解决
列表数组中插入数据后,刷新UI的问题 
1420浏览  • 1回复 待解决
HarmonyOS  嵌套数组元素的UI刷新方案 
1355浏览  • 1回复 待解决
HarmonyOS  webview中的页面点击input输出框弹出键盘会引起抖动 
1038浏览  • 1回复 待解决
Array内容监听问题,点击某个按钮,对VM中的数组执行push操作,不会触发监听,但是变更其他值就能触发监听 
1473浏览  • 1回复 待解决
使用@State修饰的数组对象,改变其中的某个对象的变量,自定义组件中的UI没有跟着刷新 
2033浏览  • 1回复 待解决
HarmonyOS LazyForEach在现有的数组的开头位置增加数组数据,如何刷新UI 
824浏览  • 1回复 待解决
HarmonyOS @State标注的二维数组,当元素变更后,选中状态ui未更新 
1359浏览  • 1回复 待解决
HarmonyOS @State修饰的数组内部的值变化了,怎么刷新UI? 
1962浏览  • 1回复 待解决





















@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化失效的主要原因有:
1、@Observed装饰器可以观察到嵌套对象的属性变化,其他装饰器仅能观察到第二层的变化。
2、需要将具有观测能力的类对象绑定组件,来确保当改变这些类对象的内容时,UI能够正常的刷新(New一个继承了Array的对象而不是自定义数组),可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5
状态管理使用文档:
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/properly-use-state-management-to-develope.md#%E5%B0%86%E7%AE%80%E5%8D%95%E5%B1%9E%E6%80%A7%E6%95%B0%E7%BB%84%E5%90%88%E5%B9%B6%E6%88%90%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84
参考示例如下: