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
        
      
                  
                  
                  
