• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# FrameNode
2
3**FrameNode** represents an entity node in the component tree. It can be used by a [NodeController](./js-apis-arkui-nodeController.md#nodecontroller) to mount a [BuilderNode](./js-apis-arkui-builderNode.md#buildernode) (that holds the to FrameNode) to a [\<NodeContainer>](../arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) or mount a [RenderNode](./js-apis-arkui-renderNode.md#rendernode) to another FrameNode.
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8>
9> **FrameNode** is not available in DevEco Studio Previewer.
10
11## Modules to Import
12
13```ts
14import { FrameNode } from "@ohos.arkui.node";
15```
16
17## FrameNode
18
19### constructor
20
21constructor(uiContext: UIContext)
22
23Constructor used to create a FrameNode.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Parameters**
28
29| Name   | Type                                     | Mandatory| Description                              |
30| --------- | ----------------------------------------- | ---- | ---------------------------------- |
31| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | Yes  | UI context required for creating a node.|
32
33### getRenderNode
34
35getRenderNode(): RenderNode | null
36
37Obtains the RenderNode instance held in this FrameNode.
38
39**System capability**: SystemCapability.ArkUI.ArkUI.Full
40
41**Return value**
42
43| Type                                                          | Description                                                                 |
44| -------------------------------------------------------------- | --------------------------------------------------------------------- |
45| [RenderNode](./js-apis-arkui-renderNode.md#rendernode) \| null | **RenderNode** instance. If this FrameNode does not hold any RenderNode, null is returned.|
46
47### Example
48
49```ts
50import { NodeController, FrameNode } from '@ohos.arkui.node';
51
52class MyNodeController extends NodeController {
53  private rootNode: FrameNode | null = null;
54
55  makeNode(uiContext: UIContext): FrameNode | null {
56    this.rootNode = new FrameNode(uiContext);
57
58    const renderNode = this.rootNode.getRenderNode();
59    if (renderNode !== null) {
60      renderNode.size = { width: 100, height: 100 };
61      renderNode.backgroundColor = 0XFF0000;
62    }
63
64    return this.rootNode;
65  }
66}
67
68@Entry
69@Component
70struct Index {
71  private myNodeController: MyNodeController = new MyNodeController();
72
73  build() {
74    Row() {
75      NodeContainer(this.myNodeController)
76    }
77  }
78}
79```
80