HarmonyOS鸿蒙Next中@Builder函数不能根据参数变化自动刷新UI
HarmonyOS鸿蒙Next中@Builder函数不能根据参数变化自动刷新UI 在@Component页面组件中实现了带有1个引用类型参数的@Builder函数,调用该函数并以字面量形式传入被@State修饰的参数时,可以正常地动态刷新UI。但是将该函数作为参数传递给自定义的@Component组件的@BuilderParam参数后,虽然能够正常渲染,但是不能自动刷新UI了。
这是对比测试的代码:
这是自定义组件的实现:
请大佬指点迷经
参考如下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重建。