• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# NodeContainer
2
3基础组件，不支持尾随添加子节点。组件接受一个[NodeController](../js-apis-arkui-nodeController.md)的实例接口。需要NodeController组合使用。
4
5> **说明：**
6>
7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> 该组件下仅支持挂载自定义节点[FrameNode](../js-apis-arkui-frameNode.md)或者是[BuilderNode](../js-apis-arkui-builderNode.md)中获取的根节点FrameNode。
10> 不支持挂载查询获得的系统组件[代理节点](../js-apis-arkui-frameNode.md#ismodifiable12)。
11>
12> 当前不支持使用[动态属性设置](./ts-universal-attributes-attribute-modifier.md)。
13>
14> 该组件下的节点树构建中会使用UI实例[UIContext](../js-apis-arkui-UIContext.md)，当实例切换时可能会因为实例不匹配而出现问题，因此该组件当前不支持跨实例的节点复用。
15## 子组件
16
17不支持子组件。
18
19## 接口
20
21### NodeContainer
22
23NodeContainer(controller: NodeController)
24
25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
26
27**系统能力：** SystemCapability.ArkUI.ArkUI.Full
28
29**参数：**
30
31| 参数名     | 类型                                                 | 必填 | 说明                                                         |
32| ---------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
33| controller | [NodeController](../js-apis-arkui-nodeController.md) | 是   | NodeController用于控制NodeContainer中的节点的上树和下树，反映NodeContainer容器的生命周期。 |
34## 属性
35
36支持[通用属性](ts-component-general-attributes.md)。
37
38## 事件
39
40支持[通用事件](ts-component-general-events.md)。
41
42## 示例
43
44通过NodeController挂载BuilderNode节点。
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)