• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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添加删除NodeContent中的FrameNode节点。
88
89```ts
90// xxx.ets
91import { NodeContent, typeNode } from '@kit.ArkUI';
92
93class NodeContentCtrl {
94  content: NodeContent
95  textNode: Array<typeNode.Text> = new Array();
96  uiContext: UIContext
97  width: number
98
99  constructor(uiContext: UIContext) {
100    this.content = new NodeContent()
101    this.uiContext = uiContext
102    this.width = Infinity
103  }
104
105  AddNode() {
106    let node = typeNode.createNode(this.uiContext, "Text")
107    node.initialize("ContentText:" + this.textNode.length).fontSize(20)
108    this.textNode.push(node)
109    this.content.addFrameNode(node)
110  }
111
112  RemoveNode() {
113    let node = this.textNode.pop()
114    this.content.removeFrameNode(node)
115  }
116
117  RemoveFront() {
118    let node = this.textNode.shift()
119    this.content.removeFrameNode(node)
120  }
121
122  GetContent(): NodeContent {
123    return this.content
124  }
125}
126
127@Entry
128@Component
129struct Index {
130  @State message: string = 'Hello World';
131  controller = new NodeContentCtrl(this.getUIContext());
132
133  build() {
134    Row() {
135      Column() {
136        ContentSlot(this.controller.GetContent())
137        Button("AddToSlot")
138          .onClick(() => {
139            this.controller.AddNode()
140          })
141        Button("RemoveBack")
142          .onClick(() => {
143            this.controller.RemoveNode()
144          })
145        Button("RemoveFront")
146          .onClick(() => {
147            this.controller.RemoveFront()
148          })
149      }
150      .width('100%')
151    }
152    .height('100%')
153  }
154}
155```