• 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## Child Components
14
15Not supported
16
17## APIs
18
19### NodeContainer
20
21NodeContainer(controller: import('../api/@ohos.arkui.node').NodeController)
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**Parameters**
28
29| Name    | Type                                                | Mandatory| Description                                                        |
30| ---------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
31| 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**.|
32## Attributes
33
34The [universal attributes](ts-universal-attributes-size.md) are supported.
35
36## Events
37
38The [universal events](ts-universal-events-click.md) are supported.
39
40## Example
41
42This example demonstrates how to mount a BuilderNode through **NodeController**.
43
44```ts
45import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';
46
47declare class Params {
48  text: string
49}
50
51@Builder
52function buttonBuilder(params: Params) {
53  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
54    Text(params.text)
55      .fontSize(12)
56    Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
57      .fontSize(12)
58      .borderRadius(8)
59      .backgroundColor(0x317aff)
60  }
61  .height(100)
62  .width(200)
63}
64
65class MyNodeController extends NodeController {
66  private rootNode: BuilderNode<[Params]> | null = null;
67  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
68
69  makeNode(uiContext: UIContext): FrameNode | null {
70    if (this.rootNode === null) {
71      this.rootNode = new BuilderNode(uiContext);
72      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
73    }
74    return this.rootNode.getFrameNode();
75  }
76}
77
78
79@Entry
80@Component
81struct Index {
82  private baseNode: MyNodeController = new MyNodeController()
83
84  build() {
85    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
86      Text("This is a NodeContainer contains a text and a button ")
87        .fontSize(9)
88        .fontColor(0xCCCCCC)
89      NodeContainer(this.baseNode)
90        .borderWidth(1)
91        .onClick(() => {
92          console.log("click event");
93        })
94    }
95    .padding({ left: 35, right: 35, top: 35 })
96    .height(200)
97    .width(300)
98  }
99}
100```
101![patternlock](figures/nodeContainer_sample.jpg)
102