HarmonyOS 关于使用@BuilderParam的问题

代码场景如下，在点击三次按钮后，期望显示“默认”文本，因为无法知晓@BuilderParam执行结果，所以实际仍然进到backView()方法不显示任何内容，请问该如何实现期望效果？

@Entry  
@Preview  
@Component  
struct Parent {  
  @State count: number = 0  
  
  build() {  
    Column() {  
      Child({  
        leftCustomView: () => {  
          this.backView()  
        }  
      })  
      Button('点击').onClick((event: ClickEvent) => {  
        this.count++  
      })  
    }  
    .height('100%')  
    .width('100%')  
    .backgroundColor(Color.Blue)  
  }  
  
  @Builder  
  backView() {  
    if (this.count < 3) {  
      Text(`返回${this.count}`).onClick(() => {  
      })  
    }  
  }  
}  
  
@Component  
export struct Child {  
  @Builder  
  empty() {}  
  
  @BuilderParam leftCustomView: () => void = this.empty  
  
  build() {  
    RelativeContainer() {  
      this.left()  
    }.align(Alignment.Center).width('100%').height(44).backgroundColor(Color.Pink)  
  }  
  
  @Builder  
  left() {  
    Row() {  
      if (this.leftCustomView !== this.empty) {  
        this.leftCustomView()  
      } else {  
        Text('默认')  
      }  
    }.id('left').backgroundColor(Color.Green).alignRules({  
      left: { anchor: '__container__', align: HorizontalAlign.Start },  
      center: { anchor: '__container__', align: VerticalAlign.Center }  
    })  
  }  
}

HarmonyOS

FengTianYa

2024-10-21 11:58:25

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

针对上述描述效果可以使用将count值传递给子组件来判断：参考demo。

@Entry  
@Preview  
@Component  
struct Parent1 {  
  @State count: number = 0  
  
  build() {  
    Column() {  
      Child1({  
        leftCustomView: () => {  
          this.backView()  
        },  
        count:this.count  
      })  
      Button('点击').onClick((event: ClickEvent) => {  
        this.count++  
      })  
    }  
    .height('100%')  
    .width('100%')  
    .backgroundColor(Color.Blue)  
  }  
  
  @Builder  
  backView() {  
    if (this.count < 3) {  
      Text(`返回${this.count}`).onClick(() => {  
      })  
    }  
  }  
}  
@Component  
export struct Child1 {  
  @Prop count:number  
  @Builder  
  empty() {}  
  
  @BuilderParam leftCustomView: () => void = this.empty  
  
  build() {  
    RelativeContainer() {  
      this.left()  
    }.align(Alignment.Center).width('100%').height(44).backgroundColor(Color.Pink)  
  }  
  
  @Builder  
  left() {  
    Row() {  
      if (this.count<3) {  
        this.leftCustomView()  
      } else {  
        Text('默认')  
      }  
    }.id('left').backgroundColor(Color.Green).alignRules({  
      left: { anchor: '__container__', align: HorizontalAlign.Start },  
      center: { anchor: '__container__', align: VerticalAlign.Center }  
    })  
  }  
}

或者把子组件封装的仅当插槽使用，由父组件决定传递显示的组件信息。

2024-10-21 17:24:43

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 关于使用@BuilderParam的问题

订阅鸿蒙技术特刊，精选内容抢先看