• 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## 子组件
10
11不支持子组件。
12
13## 接口
14
15### NodeContainer
16
17NodeContainer(controller: import('../api/@ohos.arkui.node').NodeController)
18
19**参数：**
20
21| 参数名     | 参数类型                                             | 必填 | 参数描述                                                     |
22| ---------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
23| controller | [NodeController](../js-apis-arkui-nodeController.md) | 是   | NodeController用于控制NodeContainer中的节点的上树和下树，反映NodeContainer容器的生命周期。 |
24
25## 属性
26
27支持[通用属性](ts-universal-attributes-size.md)
28
29## 事件
30
31支持[通用事件](ts-universal-events-click.md)。
32
33## 示例
34
35```ts
36import { UIContext } from '@ohos.arkui.UIContext';
37import { NodeController, BuilderNode, FrameNode } from '@ohos.arkui.node';
38
39
40declare class Params {
41  text: string
42}
43
44@Builder
45function buttonBuilder(params: Params) {
46  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
47    Text(params.text)
48      .fontSize(12)
49    Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
50      .fontSize(12)
51      .borderRadius(8)
52      .backgroundColor(0x317aff)
53  }
54  .height(100)
55  .width(200)
56}
57
58class MyNodeController extends NodeController {
59  private rootNode: BuilderNode<[Params]> | null = null;
60  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
61
62  makeNode(uiContext: UIContext): FrameNode | null {
63    if (this.rootNode === null) {
64      this.rootNode = new BuilderNode(uiContext);
65      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
66    }
67    return this.rootNode.getFrameNode();
68  }
69}
70
71
72@Entry
73@Component
74struct Index {
75  private baseNode: MyNodeController = new MyNodeController()
76
77  build() {
78    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
79      Text("This is a NodeContainer contains a text and a button ")
80        .fontSize(9)
81        .fontColor(0xCCCCCC)
82      NodeContainer(this.baseNode)
83        .borderWidth(1)
84        .onClick(() => {
85          console.log("click event");
86        })
87    }
88    .padding({ left: 35, right: 35, top: 35 })
89    .height(200)
90    .width(300)
91  }
92}
93```
94![patternlock](figures/nodeContainer_sample.jpg)