文档管理中心
我的
|

ArkUI (方舟UI框架)

UI

HarmonyOS 5

HarmonyOS 使用@BuilderParam出现UI重复渲染的问题,如何修改?(API12+)

代码如下:

收起
自动换行
深色代码主题
复制
@Component
struct DeviceStr{
  @Link listData:Array<string>
  @BuilderParam head1:() => void
  @BuilderParam bodyList:(list:Array<string>) => void
  build() {
    Column(){
      Column(){
        this.head1()
      }.flexBasis(30).justifyContent(FlexAlign.Center).backgroundColor("#E99")
      .width("100%")

      Column(){
        this.bodyList(this.listData)
      }.height(200).backgroundColor("#E0E").width("100%")
    }
  }
}

@Component
@Preview
export default struct Test {
  @State array:Array<string> = [
    "张三","李四","王五"]
  @State array1:Array<string> = [
    "张三1","李四1","王五1"]
  @Builder
  tbHead():ESObject{
    Row(){
      Text("角色列表").fontColor("#0F0")
    }.width(200).backgroundColor("#00F")
  }
  @Builder
  tbBody(data:Array<string>):ESObject{
    List(){
      ForEach(data,(item:string)=>{
        ListItem(){
          Text(item)
        }
      })
    }
  }

  build() {
    Column() {
      Row() {
        Text("插槽函数").fontSize(20).fontWeight(FontWeight.Bold).fontColor("#FFF")
      }.backgroundColor("#ff115d19").width("100%").justifyContent(FlexAlign.Center)
      .padding(10)

      DeviceStr({
        listData:$array,
        head1:this.tbHead(),
        bodyList:this.tbBody(this.array1)
      })

    }.width("100%").height("100%")
  }
}
点赞
收藏
回复
1
分享
举报
浏览42 发布于2026-04-02 11:25未知归属地
全部评论
最多点赞
最新发布
最早发布

注意:@BuilderParam接收的值应为@Builder函数,而非结果。

参考如下代码:

@Component
struct Child {
  @Link listData: Array<string>
  @BuilderParam head1: () => void
  @BuilderParam bodyList: (list: Array<string>) => void
  build() {
    Column() {
      Column() {
        this.head1()
      }
      .flexBasis(30)
      .justifyContent(FlexAlign.Center)
      .backgroundColor("#E99")
      .width("100%")

      Column() {
        this.bodyList(this.listData)
      }
      .height(200)
      .backgroundColor("#E0E")
      .width("100%")
    }
  }
}

@Component
@Preview
export default struct Test {
  @State arr1: Array<string> = [
    "aaa", "bbb", "ccc"]
  @State arr2: Array<string> = [
    "ddd", "eee", "fff"]

  @Builder
  child1() {
    Row() {
      Text("列表")
        .fontColor("#0F0")
    }
    .width(200)
    .backgroundColor("#00F")
  }

  @Builder
  child2(data: Array<string>) {
    List() {
      ForEach(data, (item: string) => {
        ListItem() {
          Text(item)
        }
      }, (item: string) => item)
    }
  }

  build() {
    Column() {
      Child({
        listData: $arr1,
        head1: this.child1,
        bodyList: () => {
          this.child2(this.arr2)
        }
      })

    }.width("100%").height("100%")
  }
}
展开全部
1楼回复于2026-04-02 11:25 未知归属地
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
  • 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容,请注明内容来源。

我要提问题

了解社区公约,与您携手共创和谐专业的开发者社区。