• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# NodeContainer
2
3The **NodeContainer** component is a basic component that accepts an instance of [NodeController](../js-apis-arkui-nodeController.md) and does not allow child nodes to be appended. It must be used together with **NodeController**.
4
5> **NOTE**
6>
7> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> Only custom [FrameNodes](../js-apis-arkui-frameNode.md) or the root FrameNode obtained from a [BuilderNode](../js-apis-arkui-builderNode.md) can be attached to this component.
10> [Proxy nodes](../js-apis-arkui-frameNode.md#ismodifiable12) of built-in system components obtained through querying cannot be attached to this component.
11>
12> This component does not work with the [attribute modifier](./ts-universal-attributes-attribute-modifier.md).
13>
14> During the construction of the node tree under this component, the UI instance UIContext](../js-apis-arkui-UIContext.md) is used. Switching between different UI instances might cause issues due to instance mismatches. As a result, this component currently does not support reusing nodes across multiple instances.
15## Child Components
16
17Not supported
18
19## APIs
20
21### NodeContainer
22
23NodeContainer(controller: NodeController)
24
25**Atomic service API**: This API can be used in atomic services since API version 12.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29**Parameters**
30
31| Name    | Type                                                | Mandatory| Description                                                        |
32| ---------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
33| controller | [NodeController](../js-apis-arkui-nodeController.md) | Yes  | **NodeController** instance used to control the upper and lower tree nodes in the **NodeContainer**. It represents the lifecycle of the **NodeContainer**.|
34## Attributes
35
36The [universal attributes](ts-component-general-attributes.md) are supported.
37
38## Events
39
40The [universal events](ts-component-general-events.md) are supported.
41
42## Example
43
44This example demonstrates how to mount a BuilderNode through **NodeController**.
45
46```ts
47import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';
48
49declare class Params {
50  text: string
51}
52
53@Builder
54function buttonBuilder(params: Params) {
55  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
56    Text(params.text)
57      .fontSize(12)
58    Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
59      .fontSize(12)
60      .borderRadius(8)
61      .backgroundColor(0x317aff)
62  }
63  .height(100)
64  .width(200)
65}
66
67class MyNodeController extends NodeController {
68  private rootNode: BuilderNode<[Params]> | null = null;
69  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
70
71  makeNode(uiContext: UIContext): FrameNode | null {
72    if (this.rootNode === null) {
73      this.rootNode = new BuilderNode(uiContext);
74      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
75    }
76    return this.rootNode.getFrameNode();
77  }
78}
79
80
81@Entry
82@Component
83struct Index {
84  private baseNode: MyNodeController = new MyNodeController()
85
86  build() {
87    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
88      Text("This is a NodeContainer contains a text and a button ")
89        .fontSize(9)
90        .fontColor(0xCCCCCC)
91      NodeContainer(this.baseNode)
92        .borderWidth(1)
93        .onClick(() => {
94          console.log("click event");
95        })
96    }
97    .padding({ left: 35, right: 35, top: 35 })
98    .height(200)
99    .width(300)
100  }
101}
102```
103![patternlock](figures/nodeContainer_sample.jpg)
104