1# NodeContent 2 3NodeContent是ArkUI提供的ContentSlot的管理器。 4 5> **说明:** 6> 7> 本模块首批接口从API version 12开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 8 9## 导入模块 10 11```ts 12import {NodeContent } from '@kit.ArkUI' 13``` 14 15## NodeContent 16 17### constructor 18 19constructor() 20 21节点内容的实体封装。 22 23**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 24 25**系统能力:** SystemCapability.ArkUI.ArkUI.Full 26 27**示例:** 28 29<!--code_no_check--> 30 31```ts 32import { nativeNode } from 'libNativeNode.so' // 开发者自己实现的so 33import {NodeContent } from '@kit.ArkUI' 34 35@Component 36struct Parent { 37 private nodeContent: Content = new NodeContent(); 38 39 aboutToAppear() { 40 // 通过C-API创建节点,并添加到管理器nodeContent上 41 nativeNode.createNativeNode(this.nodeContent); 42 } 43 44 build() { 45 Column() { 46 // 显示nodeContent管理器里存放的Native侧的组件 47 ContentSlot(this.nodeContent) 48 } 49 } 50} 51``` 52 53### addFrameNode<sup>12+</sup> 54 55addFrameNode(node: FrameNode): void 56 57根据参数将FrameNode添加到NodeContent中。 58 59**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 60 61**系统能力:** SystemCapability.ArkUI.ArkUI.Full 62 63**参数:** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ------- | ------------------------------------------------------ | ---- | ---------------- | 67| node | [FrameNode](./js-apis-arkui-frameNode.md#framenode) | 是 | 需要添加的FrameNode。 | 68 69### removeFrameNode<sup>12+</sup> 70 71removeFrameNode(node: FrameNode): void 72 73根据参数将FrameNode从NodeContent中删除。 74 75**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 76 77**系统能力:** SystemCapability.ArkUI.ArkUI.Full 78 79**参数:** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ------- | ------------------------------------------------------ | ---- | ---------------- | 83| node | [FrameNode](./js-apis-arkui-frameNode.md#framenode) | 是 | 需要删除的FrameNode。 | 84 85**示例:** 86 87```ts 88import {NodeContent, typeNode } from '@kit.ArkUI'; 89 90class NodeContentCtrl { 91 content: NodeContent 92 textNode: Array<typeNode.Text> = new Array(); 93 uiContext: UIContext 94 width: number 95 96 constructor(uiContext: UIContext) { 97 this.content = new NodeContent() 98 this.uiContext = uiContext 99 this.width = Infinity 100 } 101 102 AddNode() { 103 let node = typeNode.createNode(this.uiContext, "Text") 104 node.initialize("ContentText:" + this.textNode.length).fontSize(20) 105 this.textNode.push(node) 106 this.content.addFrameNode(node) 107 } 108 109 RemoveNode() { 110 let node = this.textNode.pop() 111 this.content.removeFrameNode(node) 112 } 113 114 RemoveFront() { 115 let node = this.textNode.shift() 116 this.content.removeFrameNode(node) 117 } 118 119 GetContent(): NodeContent { 120 return this.content 121 } 122} 123 124@Entry 125@Component 126struct Index { 127 @State message: string = 'Hello World'; 128 controller = new NodeContentCtrl(this.getUIContext()); 129 130 build() { 131 Row() { 132 Column() { 133 ContentSlot(this.controller.GetContent()) 134 Button("AddToSlot") 135 .onClick(() => { 136 this.controller.AddNode() 137 }) 138 Button("RemoveBack") 139 .onClick(() => { 140 this.controller.RemoveNode() 141 }) 142 Button("RemoveFront") 143 .onClick(() => { 144 this.controller.RemoveFront() 145 }) 146 } 147 .width('100%') 148 } 149 .height('100%') 150 } 151} 152```