HarmonyOS鸿蒙Next中@Builder函数不能根据参数变化自动刷新UI

HarmonyOS鸿蒙Next中@Builder函数不能根据参数变化自动刷新UI 在@Component页面组件中实现了带有1个引用类型参数的@Builder函数,调用该函数并以字面量形式传入被@State修饰的参数时,可以正常地动态刷新UI。但是将该函数作为参数传递给自定义的@Component组件的@BuilderParam参数后,虽然能够正常渲染,但是不能自动刷新UI了。

这是对比测试的代码:

这是自定义组件的实现:

请大佬指点迷经

6 回复

参考如下demo:

// .ets
@Component
struct InputArea {
  @BuilderParam contentBuilder?: () => void | void

  build() {
    Column() {
      this.contentBuilder
    }
    .height('100%')
    .width('100%')
  }
}

@ObservedV2
class StringDataInfo {
  @Trace dataInfo: string = "";

  constructor(dataInfo: string) {
    this.dataInfo = dataInfo;
  }
}

@Entry
@Component
struct forum {
  @State message: string = 'Hello World';
  data: StringDataInfo = new StringDataInfo("0")

  @Builder
  textInputBuilder(param: StringDataInfo) {
    Button(param.dataInfo)
      .onClick(() => {
        this.data.dataInfo = "dataInfo123"
      })
  }

  build() {
    Column() {
      Text("message===" + this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      InputArea({
        contentBuilder: this.textInputBuilder(this.data)
      })
    }
    .height('100%')
    .width('100%')
  }
}

使用V2定义类

更多关于HarmonyOS鸿蒙Next中@Builder函数不能根据参数变化自动刷新UI的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


还不是这个原因,最早就是用的"contentbuilder:() => { this.xxx }"这种写法,我以为是嵌套太深导致不能更新才改为现在这种方式。而且现在也不是this.xxx的写法,而是this.xxx()。

标题

这里是正文内容。这是第一段。

这是第二段。

子标题

这里是一些列表项:

  • 列表项1
  • 列表项2
  • 列表项3

这里是另一段正文。

在HarmonyOS鸿蒙Next中,@Builder函数本身并不具备根据参数变化自动刷新UI的能力。@Builder主要用于构建UI组件,其内部逻辑不会因为外部参数的变化而自动触发UI更新。要实现UI随参数变化自动刷新,通常需要使用状态管理机制,如@State@Prop@Link等装饰器来管理组件的状态变化。当这些状态发生变化时,UI会随之刷新。如果需要在@Builder函数中实现类似效果,可以通过将其与状态管理装饰器结合使用来实现。例如,可以在父组件中使用@State来管理状态,并将该状态传递给@Builder函数,当状态变化时,父组件会重新渲染,从而触发@Builder函数的重新执行,达到UI刷新的目的。

在HarmonyOS鸿蒙Next中,@Builder函数本身不具备自动响应参数变化的能力。它主要用于封装UI组件,而不处理状态管理。要实现UI的自动刷新,需配合@State@Link等状态管理装饰器使用。例如,将变化的参数用@State修饰,当参数更新时,系统会自动触发UI重建。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!