HarmonyOS 5.0应用开发——ContentSlot的使用

【高心星出品】

ContentSlot的使用

用于渲染并管理Native层使用C-API创建的组件同时也支持ArkTS创建的NodeContent对象。

支持混合模式开发，当容器是ArkTS组件，子组件在Native侧创建时，推荐使用ContentSlot占位组件。

ContentSlot只是一个语法节点，无通用属性，不参与布局和渲染，所以布局属性是其父容器提供。

使用方法

ContentSlot(content: Content)

这里的content一般提供NodeContent对象，NodeContent对象里面一般放入typenode节点对象，而typenode节点对象可以增加新的typenode节点对象，也可以将@builder全局构建函数转化为ComponentContent加入到typenode对象中，所以ContentSlot的使用结构为：

contentslot---->nodecontent--->typenode--->componentcontent--->@builder全局构建函数

案例

接下来通过一个案例展示使用typenode的appchild来增加子节点，和通过addComponentContent来增加子节点两种方式渲染UI界面的方法。

运行结果

全局构建函数

生成一个文本布局

interface param {
  str: string
  num: number
}

@Builder
function genitem(p: param) {
  Text(p.str + p.num).fontSize(24).fontWeight(FontWeight.Bolder)
}

typenode生成线性布局

typenode生成线性布局并且设置相关属性。

// 创建水平线性布局
let row = typeNode.createNode(this.context, 'Row')
// 设置相关属性
row.attribute.width('100%')
row.attribute.backgroundColor(Color.Red)
row.attribute.justifyContent(FlexAlign.SpaceEvenly)
row.attribute.padding(20)
// 初始化
row.initialize()

typenode生成文本组件和按钮组件

// 创建text组件
let text1 = typeNode.createNode(this.context, 'Text')
text1.attribute.fontColor(Color.White).fontWeight(FontWeight.Bolder)
// 初始化文本
text1.initialize('typenode--child1')
// 创建button组件
let button1 = typeNode.createNode(this.context, 'Button')
// 按钮绑定事件  一处文本组件
button1.attribute.onClick(()=>{
  row.removeChild(text1)
})
// 初始化按钮文本
button1.initialize('typenode--child2')
// 加入线性布局中
row.appendChild(text1)
// 加入线性布局中
row.appendChild(button1)

typenode加入componentcontent

// 生成componentcontent
let buildercontent = new ComponentContent(this.context, wrapBuilder<[param]>(genitem),
  { str: 'componentcontent--child', num: 1 } as param, { nestingBuilderSupported: true })
// 创建新的线性布局
let row1 = typeNode.createNode(this.context, 'Row')
row1.attribute.padding(20)
row1.initialize()
// 增加节点
row1.addComponentContent(buildercontent)
// 将两个线性布局加入nodecontent
this.content.addFrameNode(row1)
this.content.addFrameNode(row)

在build函数中显示

build() {
  Column() {
    //contentslot---->nodecontent--->typenode--->componentcontent
    // 使用contentslot方法显示布局
    ContentSlot(this.content)

  }
  .height('100%')
  .width('100%')
}

完整代码

import { ComponentContent, FrameNode, NodeContent, typeNode } from '@kit.ArkUI';

interface param {
  str: string
  num: number
}

@Builder
function genitem(p: param) {
  Text(p.str + p.num).fontSize(24).fontWeight(FontWeight.Bolder)
}

@Entry
@Component
struct Nodecontentpage {
  @State message: string = 'Hello World';
  private context: UIContext = this.getUIContext()
  private content: NodeContent = new NodeContent()

  aboutToAppear(): void {
    // 创建水平线性布局
    let row = typeNode.createNode(this.context, 'Row')
    // 设置相关属性
    row.attribute.width('100%')
    row.attribute.backgroundColor(Color.Red)
    row.attribute.justifyContent(FlexAlign.SpaceEvenly)
    row.attribute.padding(20)
    // 初始化
    row.initialize()
    // 创建text组件
    let text1 = typeNode.createNode(this.context, 'Text')
    text1.attribute.fontColor(Color.White).fontWeight(FontWeight.Bolder)
    // 初始化文本
    text1.initialize('typenode--child1')
    // 创建button组件
    let button1 = typeNode.createNode(this.context, 'Button')
    // 按钮绑定事件  一处文本组件
    button1.attribute.onClick(()=>{
      row.removeChild(text1)
    })
    // 初始化按钮文本
    button1.initialize('typenode--child2')
    // 加入线性布局中
    row.appendChild(text1)
    // 加入线性布局中
    row.appendChild(button1)
    // 生成componentcontent
    let buildercontent = new ComponentContent(this.context, wrapBuilder<[param]>(genitem),
      { str: 'componentcontent--child', num: 1 } as param, { nestingBuilderSupported: true })
    // 创建新的线性布局
    let row1 = typeNode.createNode(this.context, 'Row')
    row1.attribute.padding(20)
    row1.initialize()
    // 增加节点
    row1.addComponentContent(buildercontent)
    // 将两个线性布局加入nodecontent
    this.content.addFrameNode(row1)
    this.content.addFrameNode(row)
  }

  build() {
    Column() {
      //contentslot---->nodecontent--->typenode--->componentcontent
      // 使用contentslot方法显示布局
      ContentSlot(this.content)

    }
    .height('100%')
    .width('100%')
  }
}
     //contentslot---->nodecontent--->typenode--->componentcontent
      // 使用contentslot方法显示布局
      ContentSlot(this.content)

    }
    .height('100%')
    .width('100%')
  }
}