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