【高心星出品】

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: stringnum: 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: stringnum: 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)// 生成componentcontentlet 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)// 将两个线性布局加入nodecontentthis.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%')}
}