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```