1# NodeController
2
3NodeController用于实现自定义节点的创建、显示、更新等操作的管理，并负责将自定义节点挂载到[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)上。
4
5> **说明：**
6>
7> 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
8> 
9> 当前不支持在预览器中使用NodeController。
10
11## 导入模块
12
13```ts
14import {  NodeController  } from '@kit.ArkUI';
15```
16
17## NodeController
18
19通常搭配[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)进行使用。用于创建控制器管理绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)组件。一个NodeController只允许与一个[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)进行绑定。
20
21**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
22
23**系统能力：** SystemCapability.ArkUI.ArkUI.Full
24
25### makeNode
26
27abstract makeNode(uiContext : UIContext): FrameNode | null
28
29当实例绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)创建的时候进行回调。回调方法将返回一个节点，将该节点挂载至[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)。
30或者可以通过NodeController的rebuild()方法进行回调的触发。
31
32**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
33
34**系统能力：** SystemCapability.ArkUI.ArkUI.Full
35
36**参数：**
37
38| 参数名    | 类型                                      | 必填 | 说明                                                                                                          |
39| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------------------------------------------------------- |
40| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | 是   | 回调该方法的时候，绑定[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)的UI上下文。 |
41
42**返回值：**
43
44| 类型             | 说明                                                                                                                                                                                                                                                        |
45| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
46| [FrameNode](./js-apis-arkui-frameNode.md#framenode)\| null | 一个FrameNode对象，返回的节点将被挂载至[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)的占位节点上。若返回null对象，将清空对应[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)的子节点。 |
47
48### aboutToAppear
49
50aboutToAppear?(): void
51
52当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)挂载显示后触发此回调。
53
54> **说明：**
55>
56> 回调时机参考[onAppear](arkui-ts/ts-universal-events-show-hide.md#onappear)。
57
58**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
59
60**系统能力：** SystemCapability.ArkUI.ArkUI.Full
61
62### aboutToDisappear
63
64aboutToDisappear?(): void
65
66当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)卸载消失时触发此回调。
67
68> **说明：**
69>
70> 回调时机参考[onDisAppear](arkui-ts/ts-universal-events-show-hide.md#ondisappear)。
71
72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
73
74**系统能力：** SystemCapability.ArkUI.ArkUI.Full
75
76### aboutToResize
77
78aboutToResize?(size: Size): void
79
80当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)布局的时候触发此回调。
81
82**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
83
84**系统能力：** SystemCapability.ArkUI.ArkUI.Full
85
86**参数：**
87
88| 参数名 | 类型                                     | 必填 | 说明                                     |
89| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
90| size   | [Size](./js-apis-arkui-graphics.md#size) | 是   | 用于返回组件布局大小的宽和高，单位为vp。 |
91
92### onTouchEvent
93
94onTouchEvent?(event: TouchEvent): void
95
96当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)收到Touch事件时触发此回调。
97
98**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
99
100**系统能力：** SystemCapability.ArkUI.ArkUI.Full
101
102**参数：**
103
104| 参数名 | 类型                                                                      | 必填 | 说明       |
105| ------ | ------------------------------------------------------------------------- | ---- | ---------- |
106| event  | [TouchEvent](arkui-ts/ts-universal-events-touch.md#touchevent对象说明) | 是   | 触摸事件。 |
107
108### rebuild
109
110rebuild(): void
111
112调用此接口通知[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)组件重新回调[makeNode](#makenode)方法，更改子节点。
113
114**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
115
116**系统能力：** SystemCapability.ArkUI.ArkUI.Full
117
118> **说明：**
119> 由于rebuild方法为应用主动调用的方法，且该操作与UI相关。需要开发者自行保证调用该接口时UI上下文有效，即与绑定的NodeContainer保持UI上下文一致。
120>
121> 监听回调等UI上下文不明确时，可以通过[UIContext](./js-apis-arkui-UIContext.md)的[runScopedTask](./js-apis-arkui-UIContext.md#runscopedtask)方法明确调用时的UI上下文。
122
123### 示例
124
125```ts
126import {  NodeController, BuilderNode, Size, FrameNode ,UIContext } from '@kit.ArkUI';
127
128class Params {
129  text: string = "this is a text"
130}
131
132@Builder
133function buttonBuilder(params: Params) {
134  Column() {
135    Button(params.text)
136      .fontSize(12)
137      .borderRadius(8)
138      .borderWidth(2)
139      .backgroundColor(Color.Orange)
140  }
141}
142
143class MyNodeController extends NodeController {
144  private buttonNode: BuilderNode<[Params]> | null = null;
145  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
146
147  makeNode(uiContext: UIContext): FrameNode {
148    if (this.buttonNode == null) {
149      this.buttonNode = new BuilderNode(uiContext);
150      this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" })
151    }
152    return this.buttonNode!.getFrameNode()!;
153  }
154
155  aboutToResize(size: Size) {
156    console.log("aboutToResize width : " + size.width + " height : " + size.height)
157  }
158
159  aboutToAppear() {
160    console.log("aboutToAppear")
161  }
162
163  aboutToDisappear() {
164    console.log("aboutToDisappear");
165  }
166
167  onTouchEvent(event:TouchEvent) {
168    console.log("onTouchEvent");
169  }
170}
171
172@Entry
173@Component
174struct Index {
175  private myNodeController: MyNodeController = new MyNodeController();
176
177  build() {
178    Column() {
179      NodeContainer(this.myNodeController)
180    }
181    .padding({ left: 35, right: 35, top: 35 })
182    .width("100%")
183    .height("100%")
184  }
185}
186```
187![patternlock](figures/node_controller.jpg)