鸿蒙开发：动态添加节点

前言

本文基于Api13

做过Android的同学都知道，我们可以拿到任意一个容器组件，比如LinearLayout或者RelativeLayout,或者其他容器视图，我们都可以进行自由的添加子组件，方便我们去处理一些子元素动态变化的场景，然而由于鸿蒙的ArkUI是声明式的UI，我们无法拿到一个容器组件进行对其动态的添加。

比如一个Column组件，我们如何动态的添加子组件呢？可能很多人都会想到，通过条件判断的形式进行追加。

声明组件类型，这里，可以创建一个组件对象，把组件的相关属性，数据声明一下，这里，我简单的只设置了一个类型。

1enum NodeType {
2  Text, Image
3}

通过不断的改变以上的组件类型，我们在Column组件中进行遍历，根据类型判断使用哪个组件。

1Column() {
2      ForEach(this.mNodeType, (type: NodeType) => {
3        if (type == NodeType.Text) {
4          Text("我是一个Text组件")
5        } else if (type == NodeType.Image) {
6          Image($r("app.media.app_icon"))
7            .width(20)
8            .height(20)
9        }
10      })
11    }
12    .height('100%')
13    .width('100%')
14    .justifyContent(FlexAlign.Center)

显然以上的方式是不够友好，因为组件都是固定的，不能动态的想添加哪个就添加哪个，而且相关属性配置起来也是十分的复杂，即便能够千方百计的实现出来，也远远不如Android端那样灵活。

那么，有没有一种方式可以脱离UI的限制，实现灵活多变的想追加哪个组件就追加哪个组件呢？这就是本篇文章所阐述的内容，通过NodeController和FrameNode来实现。

NodeController

NodeController主要用于实现自定义节点的创建、显示、更新等操作的管理，并负责将自定义节点挂载到NodeContainer上，NodeController是一个抽象类，使用的时候，我们可以单独创建一个子类用于继承它。

简单一个Demo，使用NodeContainer进行展示一个文本组件。

1@Entry
2@Component
3struct DemoPage {
4  private myNodeController: MyNodeController = new MyNodeController()
5
6  build() {
7    Column() {
8      NodeContainer(this.myNodeController)
9    }
10    .height('100%')
11    .width('100%')
12    .justifyContent(FlexAlign.Center)
13  }
14}
15
16@Builder
17function TextBuilder(message: string) {
18  Text(message)
19}
20
21class MyNodeController extends NodeController {
22  private buttonNode: BuilderNode<[string]> | null = null
23  private wrapBuilder: WrappedBuilder<[string]> = wrapBuilder(TextBuilder)
24
25  makeNode(uiContext: UIContext): FrameNode {
26    if (this.buttonNode == null) {
27      this.buttonNode = new BuilderNode(uiContext)
28      this.buttonNode.build(this.wrapBuilder, "简单一个文本")
29    }
30    return this.buttonNode!.getFrameNode()!
31  }
32}

FrameNode

FrameNode表示组件树的实体节点，通过FrameNode我们可以实现添加，删除，获取子节点，主要方法有：

在添加组件时，主要通过typeNode来创建组件，目前支持二十多种组件形式，比如常见的容器组件，文本，图片，列表等等，基本涵盖了日常中常见的。

比如，我们创建一个Column组件，在Column组件中再追加一个Text文本组件。

1@Entry
2@Component
3struct DemoPage {
4  private myNodeController: MyNodeController = new MyNodeController()
5
6  build() {
7    Column() {
8      NodeContainer(this.myNodeController)
9    }
10    .height('100%')
11    .width('100%')
12    .justifyContent(FlexAlign.Center)
13  }
14}
15
16
17class MyNodeController extends NodeController {
18  makeNode(uiContext: UIContext): FrameNode {
19    let rootNode = new FrameNode(uiContext)
20    //创建一个Column组件
21    let column = typeNode.createNode(uiContext, "Column")
22    column.initialize()
23      .width("100%")
24      .height("100%")
25      .justifyContent(FlexAlign.Center)
26    rootNode.appendChild(column)
27    //创建一个Text组件
28    let text = typeNode.createNode(uiContext, "Text")
29    text.initialize("文本组件")
30      .fontColor(Color.Red)
31      .fontSize(20)
32      .padding(10)
33      .border({ width: 1, color: Color.Red })
34    column.appendChild(text)
35    return rootNode
36  }
37}

我们运行一下，看下效果。

相关总结

流程就是，通过typeNode来创建自己的组件，然后使用追加到FrameNode节点中，然后将自定义节点挂载到NodeContainer上即可，主要使用场景，需要动态创建组件的场景。