问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS Next如何直接操作组件树？

头像
轻口味
    38.9k579419
    HarmonyOSharmonyos-next
    阅读 593
    avatarAI BotBETA

    HarmonyOS Next 可以通过 BuilderNode 来直接操作组件树。BuilderNode 提供能够挂载原生组件的能力，支持通过无状态的 UI 方法全局 @Builder 生成组件树，并可以通过 getFrameNode 获取组件树的根 FrameNode 节点。以下是一些关键点和操作方式：

    BuilderNode 的主要能力

    • 挂载原生组件：BuilderNode 可以将原生组件挂载到 NodeContainer 节点下，或者在 FrameNode 树结构和 RenderNode 树结构中嵌入声明式的组件结构，实现混合显示的能力。
    • 纹理导出：BuilderNode 可以提供纹理导出的功能，导出的纹理用于在 XComponent 中进行同层渲染显示。
    • 组件预创建：BuilderNode 提供了组件预创建的能力，能够自定义原生组件的创建开始的时间，在后续的业务中动态挂载显示。

    使用 BuilderNode 操作组件树的步骤

    1. 创建 BuilderNode：在需要操作组件树的地方，创建一个 BuilderNode 实例。
    2. 构建组件树：通过 BuilderNode 的 build 方法，传入一个 WrappedBuilder 对象来构建组件树。WrappedBuilder 对象通常是通过 @Builder 装饰的函数返回的。
    3. 获取 FrameNode：在组件树构建完成后，可以通过 BuilderNode 的 getFrameNode 方法获取到组件树的根 FrameNode 节点。
    4. 挂载 FrameNode：将获取到的 FrameNode 挂载到 NodeContainer 或者其他 FrameNode 下，以实现组件的显示。

    示例代码

    以下是一个简单的示例，展示了如何使用 BuilderNode 来创建和挂载一个文本组件：

    import { BuilderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI';

class Params {
    text: string = "";
    constructor(text: string) {
        this.text = text;
    }
}

@Builder
function buildText(params: Params) {
    return Column() {
        Text(params.text)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .margin({ bottom: 36 });
    }
}

class TextNodeController extends NodeController {
    private textNode: BuilderNode<[Params]> | null = null;
    private message: string = "DEFAULT";

    constructor(message: string) {
        super();
        this.message = message;
    }

    makeNode(context: UIContext): FrameNode | null {
        this.textNode = new BuilderNode(context);
        this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message));
        return this.textNode.getFrameNode();
    }
}

@Entry
@Component
struct Index {
    @State message: string = "hello";

    build() {
        Row() {
            Column() {
                NodeContainer(new TextNodeController(this.message))
                    .width('100%')
                    .height(100)
                    .backgroundColor('#FFF0F0F0');
            }
            .width('100%')
            .height('100%');
        }
        .height('100%');
    }
}

    在这个示例中，我们定义了一个 TextNodeController 类，它继承自 NodeController。在 makeNode 方法中，我们创建了一个 BuilderNode 实例，并通过 build 方法构建了一个文本组件树。然后，我们将构建好的组件树的根节点（FrameNode）返回，并将其挂载到 NodeContainer 下以实现显示。

    综上所述，HarmonyOS Next 通过 BuilderNode 提供了直接操作组件树的能力，开发者可以利用这一能力来实现更复杂的 UI 交互和组件管理。

    1 个回答
    得票最新
    头像
    凡事提前
      4k1212

      使用声明式开发范式还存在组件树结构更新操作困难的痛点，比如将组件树中的一个子树从当前子节点完整移到另一个子节点，使用声明式开发范式无法直接调整组件实例的结构关系，只能通过重新渲染整棵组件树的方式实现上述操作。而使用ArkUI的FrameNode扩展，则可以通过操作FrameNode来很方便的操控该子树，将其移植到另一个节点，这样只会进行局部渲染刷新，性能更优。

      本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题