• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# NodeContent
2
3The **NodeContent** module implements a manager for **ContentSlot** components in ArkUI.
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8
9## Modules to Import
10
11```ts
12import {NodeContent } from '@kit.ArkUI'
13```
14
15## NodeContent
16
17### constructor
18
19constructor()
20
21A constructor used to create a **NodeContent** object.
22
23**Atomic service API**: This API can be used in atomic services since API version 12.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Example**
28
29<!--code_no_check-->
30
31```ts
32import { nativeNode } from'libNativeNode.so' // so. file implemented by you.
33import { NodeContent } from '@kit.ArkUI'
34
35@Component
36struct Parent {
37  private nodeContent: Content = new NodeContent();
38
39  aboutToAppear() {
40    // Create a node through the C API and add it to the nodeContent manager.
41    nativeNode.createNativeNode(this.nodeContent);
42  }
43
44  build() {
45    Column() {
46      // Display the native components stored in the nodeContent manager.
47      ContentSlot(this.nodeContent)
48    }
49  }
50}
51```
52
53### addFrameNode<sup>12+</sup>
54
55addFrameNode(node: FrameNode): void
56
57Adds a FrameNode to this **NodeContent** object.
58
59**Atomic service API**: This API can be used in atomic services since API version 12.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Full
62
63**Parameters**
64
65| Name | Type                                                  | Mandatory| Description            |
66| ------- | ------------------------------------------------------ | ---- | ---------------- |
67| node | [FrameNode](./js-apis-arkui-frameNode.md#framenode) | Yes  | FrameNode to add.|
68
69### removeFrameNode<sup>12+</sup>
70
71removeFrameNode(node: FrameNode): void
72
73Removes a FrameNode from this **NodeContent** object.
74
75**Atomic service API**: This API can be used in atomic services since API version 12.
76
77**System capability**: SystemCapability.ArkUI.ArkUI.Full
78
79**Parameters**
80
81| Name | Type                                                  | Mandatory| Description            |
82| ------- | ------------------------------------------------------ | ---- | ---------------- |
83| node | [FrameNode](./js-apis-arkui-frameNode.md#framenode) | Yes  | FrameNode to remove.|
84
85**Example**
86
87This example shows how to add or remove a FrameNode in the **NodeContent** object.
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```
156