NodeContainer

NodeContainer is a basic component for mounting custom nodes (such as FrameNode or BuilderNode) and dynamically managing node attachment and detachment through NodeController. This component does not support adding trailing child components and requires a NodeController instance for operation. It must be used in combination with NodeController.

NOTE

This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.

Only custom FrameNodes or the root FrameNode obtained from a BuilderNode can be attached to this component. Proxy nodes of built-in system components obtained through querying cannot be attached to this component.

This component does not work with the attribute modifier.

A UIContext instance is used to construct the node tree for this component. During instance switching, the input parameter of the makeNode callback method of the bound NodeController may be undefined due to instance mismatch. Therefore, this component does not support cross-instance node reuse.

When this component is not destroyed, the unmounting of its mounted child nodes will not be triggered.

Child Components

Not supported

APIs

NodeContainer

NodeContainer(controller: NodeController)

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
controller	NodeController	Yes	NodeController instance used to control the upper and lower tree nodes in the NodeContainer. It represents the lifecycle of the NodeContainer.

Attributes

The universal attributes are supported.

Events

The universal events are supported.

Example

This example demonstrates how to mount a BuilderNode through NodeController.

import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';

declare class Params {
  text: string
}

@Builder
function buttonBuilder(params: Params) {
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
    Text(params.text)
      .fontSize(12)
    Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
      .fontSize(12)
      .borderRadius(8)
      .backgroundColor(0x317aff)
  }
  .height(100)
  .width(200)
}

class MyNodeController extends NodeController {
  private rootNode: BuilderNode<[Params]> | null = null;
  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);

  makeNode(uiContext: UIContext): FrameNode | null {
    if (this.rootNode === null) {
      this.rootNode = new BuilderNode(uiContext);
      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
    }
    return this.rootNode.getFrameNode();
  }
}


@Entry
@Component
struct Index {
  private baseNode: MyNodeController = new MyNodeController()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
      Text("This is a NodeContainer contains a text and a button ")
        .fontSize(9)
        .fontColor(0xCCCCCC)
      NodeContainer(this.baseNode)
        .borderWidth(1)
        .onClick(() => {
          console.info("click event");
        })
    }
    .padding({ left: 35, right: 35, top: 35 })
    .height(200)
    .width(300)
  }
}