HarmonyOS 鸿蒙Next @Builder 函数如何定义组件插槽

HarmonyOS 鸿蒙Next @Builder 函数如何定义组件插槽

需要声明一个全局的Builder函数用来描述UI片段，内部定义一个Row，其中某一个UI元素，支持从外部定义，相当于外部像特定插槽中插入UI组件，这个UI插槽如何作为Builder函数参数进行定义？

@Builder
export function settingsTileBuilder(icon: PixelMap | ResourceStr | DrawableDescriptor, title: string | ResourceStr, onTap: () => void) {
  Row() {
    Image(icon)
      .width(‘17vp’)
      .height(‘17vp’)
    Text(title)
      .fontColor($r(‘app.color.onSurface’))
      .fontSize(‘16fp’)
      .margin({ left: ‘10vp’ })
    Blank()

    if (soltBuilder?) {
      soltBuilder()
    }

    Image($r(‘app.media.ic_right_arrow’))
      .size({ width: ‘9vp’, height: ‘9vp’ })
      .objectFit(ImageFit.Contain)
      .fillColor($r(‘app.color.onSurface’))
      .opacity(0.4)
  }
  .padding({ left: ‘30vp’, right: ‘30vp’, top: ‘25vp’, bottom: ‘25vp’ })
  .width(‘100%’)
  .onClick(() => {
    onTap();
  })
}

其中，soltBuilder不确定应该以什么方式添加到settingsTileBuilder这个函数的参数声明中。


更多关于HarmonyOS 鸿蒙Next @Builder 函数如何定义组件插槽的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next @Builder 函数如何定义组件插槽的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，@Builder 函数通常用于简化组件的创建和属性设置过程，但直接定义组件插槽（slots）并不是通过@Builder来实现的。插槽机制主要用于在自定义组件中嵌入子组件或内容，这在鸿蒙的组件化开发框架中是通过特定的XML标签和组件API来实现的。

要在鸿蒙组件中定义插槽，你需要在组件的XML布局文件中使用<slot>标签来指定插槽的位置和名称。然后，在父组件中使用该自定义组件时，可以通过<content>标签将内容插入到指定的插槽中。

示例如下：

  1. 在自定义组件的XML布局文件中定义插槽：

    <DirectionalLayout>
    <slot name="header"></slot>
    <Text text="Body Content"></Text>
    <slot name="footer"></slot>
</DirectionalLayout>

  2. 在父组件中使用自定义组件并插入内容：

    <CustomComponent>
    <content target="header">
        <Text text="Header Content"></Text>
    </content>
    <content target="footer">
        <Text text="Footer Content"></Text>
    </content>
</CustomComponent>
回到顶部