鸿蒙开发：动态添加节点

大家好，欢迎来到IT知识分享网。

前言

本文基于Api13

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

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

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

enum NodeType { Text, Image }

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

Column() { ForEach(this.mNodeType, (type: NodeType) => { if (type == NodeType.Text) { Text("我是一个Text组件") } else if (type == NodeType.Image) { Image($r("app.media.app_icon")) .width(20) .height(20) } }) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center)

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

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

NodeController

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

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

@Entry @Component struct DemoPage { private myNodeController: MyNodeController = new MyNodeController() build() { Column() { NodeContainer(this.myNodeController) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) } } @Builder function TextBuilder(message: string) { Text(message) } class MyNodeController extends NodeController { private buttonNode: BuilderNode<[string]> | null = null private wrapBuilder: WrappedBuilder<[string]> = wrapBuilder(TextBuilder) makeNode(uiContext: UIContext): FrameNode { if (this.buttonNode == null) { this.buttonNode = new BuilderNode(uiContext) this.buttonNode.build(this.wrapBuilder, "简单一个文本") } return this.buttonNode!.getFrameNode()! } }

FrameNode

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

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

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

@Entry @Component struct DemoPage { private myNodeController: MyNodeController = new MyNodeController() build() { Column() { NodeContainer(this.myNodeController) } .height('100%') .width('100%') .justifyContent(FlexAlign.Center) } } class MyNodeController extends NodeController { makeNode(uiContext: UIContext): FrameNode { let rootNode = new FrameNode(uiContext) //创建一个Column组件 let column = typeNode.createNode(uiContext, "Column") column.initialize() .width("100%") .height("100%") .justifyContent(FlexAlign.Center) rootNode.appendChild(column) //创建一个Text组件 let text = typeNode.createNode(uiContext, "Text") text.initialize("文本组件") .fontColor(Color.Red) .fontSize(20) .padding(10) .border({ width: 1, color: Color.Red }) column.appendChild(text) return rootNode } }

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

相关总结

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