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 "@ohos.arkui.node"; 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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23### makeNode 24 25abstract makeNode(uiContext : UIContext): FrameNode | null 26 27当实例绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)创建的时候进行回调。回调方法将返回一个节点，将该节点挂载至[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)。 28或者可以通过NodeController的rebuild()方法进行回调的触发。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------------------------------------------------------- | 36| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | 是 | 回调该方法时候，绑定[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)的UI上下文。 | 37 38**返回值：** 39 40| 类型 | 说明 | 41| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 42| [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)的子节点。 | 43 44### aboutToAppear 45 46aboutToAppear?(): void 47 48当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)挂载显示时触发此回调。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52### aboutToDisappear 53 54aboutToDisappear?(): void 55 56当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)卸载消失时触发此回调。 57 58**系统能力：** SystemCapability.ArkUI.ArkUI.Full 59 60### aboutToResize 61 62aboutToResize?(size: Size): void 63 64当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)布局的时候触发此回调。 65 66**系统能力：** SystemCapability.ArkUI.ArkUI.Full 67 68**参数：** 69 70| 参数名 | 类型 | 必填 | 说明 | 71| ------ | ---------------------------------------- | ---- | ---------------------------------------- | 72| size | [Size](./js-apis-arkui-graphics.md#size) | 是 | 用于返回组件布局大小的宽和高，单位为vp。 | 73 74### onTouchEvent 75 76onTouchEvent?(event: TouchEvent): void 77 78当NodeController绑定的[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)收到Touch事件时触发此回调。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------ | ------------------------------------------------------------------------- | ---- | ---------- | 86| event | [TouchEvent](arkui-ts/ts-universal-events-touch.md#touchevent对象说明) | 是 | 触摸事件。 | 87 88### rebuild 89 90rebuild(): void 91 92调用此接口通知[NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer)组件重新回调[makeNode](#makenode)方法，更改子节点。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96### 示例 97 98```ts 99import { UIContext } from '@ohos.arkui.UIContext'; 100import { NodeController, BuilderNode, Size, FrameNode } from '@ohos.arkui.node'; 101 102class Params { 103 text: string = "this is a text" 104} 105 106@Builder 107function buttonBuilder(params: Params) { 108 Column() { 109 Button(params.text) 110 .fontSize(12) 111 .borderRadius(8) 112 .borderWidth(2) 113 .backgroundColor(Color.Orange) 114 } 115} 116 117class MyNodeController extends NodeController { 118 private buttonNode: BuilderNode<[Params]> | null = null; 119 private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder); 120 121 makeNode(uiContext: UIContext): FrameNode { 122 if (this.buttonNode == null) { 123 this.buttonNode = new BuilderNode(uiContext); 124 this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" }) 125 } 126 return this.buttonNode!.getFrameNode()!; 127 } 128 129 aboutToResize(size: Size) { 130 console.log("aboutToResize width : " + size.width + " height : " + size.height) 131 } 132 133 aboutToAppear() { 134 console.log("aboutToAppear") 135 } 136 137 aboutToDisappear() { 138 console.log("aboutToDisappear"); 139 } 140 141 onTouchEvent(event:TouchEvent) { 142 console.log("onTouchEvent"); 143 } 144} 145 146@Entry 147@Component 148struct Index { 149 private myNodeController: MyNodeController = new MyNodeController(); 150 151 build() { 152 Column() { 153 NodeContainer(this.myNodeController) 154 } 155 .padding({ left: 35, right: 35, top: 35 }) 156 .width("100%") 157 .height("100%") 158 } 159} 160``` 161
