HarmonyOS NEXT第四章 @Builder详细理解（适用API12以上版本）

原创已于 2025-03-25 09:43:18 修改 · 352 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #华为 #harmonyos

于 2025-03-15 20:17:51 首次发布

HarmonyOS NEXT

1.自定义构建函数

1.构造函数-@Builder

@Builder：自定义构造函数（在build外构造一个函数，然后在build里面调用）

2.构建函数-传参传递（值传递）

传的参数是按值的化，那个builder不具备响应式特征

传的参数是复杂数据，而且复杂数据类型中的参数有响应式修饰符修饰，那么具备响应式特征

3. 构建函数-传递参数(引用类型传递)

4. 构建函数-传递参数练习

5. 构建函数-@BuilderParam 传递UI （插槽）

@Entry
@Component                    //父组件传函数      
struct BaiDu {
  @Builder
  //自己选入传参
  TextTXT() {
    Text('你好Hello')
  }

  //父组件框
  build() {
    Column() {
      Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png').width(160)
      //子组件（slot） 第一个默认
      Son() 
      //第二个传值
      Son() {
        this.TextTXT()
      }
    }
    .width('100%').height('100%')
  }
}

//子组件框
@Component
struct Son {
                              //子组件接收
  @BuilderParam slot: () => void = this.default //默认值，当传入一个函数时自动更换

  @Builder
                            //没有函数走默认函数->有函数走传过来的函数
  default() {
    Button('百度一下')
      .backgroundColor('#007efc')
      .width('30%')
      .borderRadius({ topRight: 30, bottomRight: 10 })
      .height(40)
  }

                            //往父组件传数据的子组件
  build() {
    Row() {
      TextInput().width('60%').borderRadius({ topLeft: 10, bottomLeft: 10 })
      //调用默认或传过来的函数
      this.slot()
    }
    .margin({ top: 30 })
  }
}