HarmonyOS 鸿蒙Next 关于WrappedBuilder如何传递状态变量问题
HarmonyOS 鸿蒙Next 关于WrappedBuilder如何传递状态变量问题
我们的组件开发中使用了WrappedBuilder
let builder: WrappedBuilder<[string, number]> = wrapBuilder(MyBuilder)
@Builder
export function MyBuilder(name: string, navAlpha: number) {
CustomNavbarWidget({ titleName: name, titleAlpha: navAlpha})
}
第二个参数是个navAlpha是父组件定义的一个@State 状态变量传递过来,我们发现这个状态变量不生效,是不是WrappedBuilder不支持状态变量,如果不支持,有其他的办法解决这个问题么?
更多关于HarmonyOS 鸿蒙Next 关于WrappedBuilder如何传递状态变量问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
请参考以下demo:
let globalBuilder: WrappedBuilder<[ListData]> = wrapBuilder(myBuilder);
[@Observed](/user/Observed)
export class IntArray extends Array<number> {
}
[@Observed](/user/Observed)
class ListData {
// new运算符使得[@Observed](/user/Observed)生效,[@Observed](/user/Observed)观察到IntArray的属性变化。
list: IntArray = new IntArray()
record_date:string = '1111'
}
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) listData: ListData = new ListData();
[@State](/user/State) num: number = 0;
build() {
Column() {
Text(this.listData.record_date)
Button('点击加载更多')
.onClick(() => {
this.num++;
this.listData.list.push(this.num)
})
globalBuilder.builder(this.listData)
}
.width('100%')
.height('100%')
.margin({ top: 5 })
.backgroundColor(Color.White)
}
}
[@Builder](/user/Builder)
function myBuilder($$:ListData){
ListDataView({list:$$.list,testSj:$$.record_date})//测试测试-----------
}
[@Component](/user/Component)
struct ListDataView{
[@ObjectLink](/user/ObjectLink) list: IntArray
[@State](/user/State) testSj:string="test"
scroller: Scroller = new Scroller()
build() {
Grid(this.scroller) {
ForEach(this.list, (item: number) => {
GridItem() {
Column({ space: 5 }) {
Image('')
.width(50).height(50)
.backgroundColor(Color.Blue)
Text(this.testSj) //----------测试测试----------
.fontSize(12)
.fontColor(0x25292e)
}
.padding(5)
.alignItems(HorizontalAlign.Center)
.width('100%')
.aspectRatio(1)
.backgroundColor("#FF3333")
}
},(item:number)=>JSON.stringify(item))
}
.layoutWeight(1)
.columnsTemplate('1fr 1fr')
.columnsGap(1)
.rowsGap(1)
.width('90%')
.backgroundColor(Color.Gray)
}
}
[@Component](/user/Component)
struct customGridItem {
build() {
Column({ space: 5 }) {
Image($r('app.media.startIcon'))
.width(50).height(50)
.backgroundColor(Color.Red)
Text("相册")
.fontSize(12)
.fontColor(0x25292e)
}
.padding(5)
.alignItems(HorizontalAlign.Center)
.width('100%')
.aspectRatio(1)
.backgroundColor("#FF3333")
}
}
更多关于HarmonyOS 鸿蒙Next 关于WrappedBuilder如何传递状态变量问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
关于HarmonyOS 鸿蒙Next中WrappedBuilder如何传递状态变量的问题,以下是专业解答:
在HarmonyOS鸿蒙Next中,WrappedBuilder封装的组件传参主要依赖于@Builder注解及wrapBuilder函数。首先,需定义一个@Builder函数,该函数接受所需参数,并构建UI元素。然后,使用wrapBuilder函数封装该@Builder函数,得到一个WrappedBuilder对象。该对象可在struct组件内部通过其builder属性方法传参并渲染UI。
具体来说,可以通过以下步骤实现状态变量的传递:
- 定义一个全局的@Builder函数,该函数接收状态变量作为参数。
- 使用wrapBuilder函数封装该@Builder函数,得到WrappedBuilder对象。
- 在struct组件内部,通过WrappedBuilder对象的builder属性方法传入状态变量,并渲染UI。
需要注意的是,wrapBuilder方法只能传入被@Builder修饰的全局函数,且WrappedBuilder对象的builder属性方法只能在struct内部使用。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html