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

2 回复

请参考以下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。

具体来说,可以通过以下步骤实现状态变量的传递:

  1. 定义一个全局的@Builder函数,该函数接收状态变量作为参数。
  2. 使用wrapBuilder函数封装该@Builder函数,得到WrappedBuilder对象。
  3. 在struct组件内部,通过WrappedBuilder对象的builder属性方法传入状态变量,并渲染UI。

需要注意的是,wrapBuilder方法只能传入被@Builder修饰的全局函数,且WrappedBuilder对象的builder属性方法只能在struct内部使用。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部