【HarmonyOS 鸿蒙实战开发】使用ArkUI的FrameNode扩展实现动态布局类框架

CTrup

于 2024-09-20 13:50:35 发布

阅读量800

点赞数 23

分类专栏：移动开发鸿蒙开发 HarmonyOS 文章标签： harmonyos 前端移动开发鸿蒙开发组件化 ArkUI

本文链接：https://blog.csdn.net/CTrup/article/details/142383139

版权

移动开发同时被 3 个专栏收录

218 篇文章 1 订阅

订阅专栏

鸿蒙开发

218 篇文章 0 订阅

订阅专栏

HarmonyOS

180 篇文章 0 订阅

订阅专栏

往期知识点整理

介绍

本示例是使用ArkUI的FrameNode扩展实现动态布局类框架的示例代码，主要讲解如何使用ArkUI的FrameNode扩展实现动态布局类框架。

效果图预览

使用说明

定义DSL用来描述UI。
定义DSL解析逻辑，使用FrameNode来创建对应组件。
使用NodeContainer组件占位，将创建的组件加载到页面中。

实现思路

定义DSL，DSL一般会使用JSON、XML等数据交换格式来描述UI，本案例使用JSON。

{
  "type": "Column",
  "css": {
    "width": "100%"
  },
  "children": [
    {
      "type": "Row",
      "css": {
        "width": "100%",
        "padding": {
          "left": 15,
          "right": 15
        },
        "margin": {
          "top": 5,
          "bottom": 5
        },
        ...
      },
      ...
    },
    ...
  ]
}

定义相应数据结构用于接收UI描述数据。

class VM {
  type?: string
  content?: string
  css?: ESObject
  children?: VM[]
  id?: string
}

自定义DSL解析逻辑，且使用carouselNodes保存轮播图节点，方便后续操作节点更新。

let carouselNodes: typeNode.Image[] = [];

function FrameNodeFactory(vm: VM, context: UIContext): FrameNode | null {
  ...
  return null;
}

function setColumnNodeAttr(node: typeNode.Column, css: ESObject) {
  ...
}

function setRowNodeAttr(node: typeNode.Row, css: ESObject) {
  ...
}

使用NodeContainer组件占位，将创建的组件加载到页面中

class ImperativeController extends NodeController {
  makeNode(uiContext: UIContext): FrameNode | null {
    return FrameNodeFactory(data, uiContext);
  }
}

@Entry
@Component
struct ImperativeView {
  controller: ImperativeController = new ImperativeController();
  build() {
    Column() {
      NodeContainer(this.controller)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Black)
  }
}

高性能知识点

使用ArkUI的FrameNode扩展，可以避免创建自定义组件对象和状态变量对象，也无需进行依赖收集，从而显著提升组件创建的速度,并且能更快的组件更新操作以及对组件树结构的直接控制。

工程结构&模块类型

   imperativedynamiclayouts                           // har类型
   |---jsonpage                                       // 存放描述UI的数据文件
   |---|---foo.json                                   // 描述UI的数据
   |---view                                           // 视图
   |---|---ImperativeView.ets                         // 视频首页

总是有很多小伙伴反馈说：鸿蒙开发不知道学习哪些技术？不知道需要重点掌握哪些鸿蒙开发知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等）技术知识点。