HarmonyOS开发实战（ Beta5.0）使用ArkUI的FrameNode扩展实现动态布局类框架详解

于 2024-09-12 17:41:01 发布
阅读量719 收藏 16
点赞数 21
分类专栏： OpenHarmony 鸿蒙开发 HarmonyOS 文章标签： harmonyos 华为 移动开发 鸿蒙 鸿蒙系统 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55362248/article/details/142178403
版权
OpenHarmony 同时被 3 个专栏收录
215 篇文章 0 订阅
订阅专栏
鸿蒙开发
215 篇文章 1 订阅
订阅专栏
HarmonyOS
215 篇文章 1 订阅
订阅专栏

鸿蒙HarmonyOS开发往期必看：

最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

HarmonyOS NEXT应用开发性能实践总结

简介

在特定的节假日或活动节点，应用通常需要推送相应主题或内容到首页，但又不希望通过程序更新方式来实现。因此，一般会采用动态布局类框架。动态布局类框架是一种动态生成原生组件树的轻量级框架，可以根据运营需求，在无需重新上架应用的情况下也可以动态地向用户推送新内容。该框架使用了类似于CSS的语法，通过设置不同的样式属性来控制视图的位置、大小、对齐方式等。本文将介绍如何使用ArkUI的FrameNode扩展来实现动态布局类框架，并探讨其带来的性能收益。

ArkUI的声明式扩展在动态框架对接场景下的优势

组件创建更快

在采用声明式前端开发模式时，若使用ArkUI的自定义组件对节点树中的每个节点进行定义，往往会遇到节点创建效率低下的问题。这主要是因为每个节点在JS引擎中都需要分配内存空间来存储应用程序的自定义组件和状态变量。此外，在节点创建过程中，还必须执行组件ID、组件闭包以及状态变量之间的依赖关系收集等操作。相比之下，使用ArkUI的FrameNode扩展，则可以避免创建自定义组件对象和状态变量对象，也无需进行依赖收集，从而显著提升组件创建的速度。

组件更新更快

在动态布局类框架的更新场景中，通常存在一个由树形数据结构ViewModelA创建的UI组件树TreeA。当需要使用新的数据结构ViewModelB来更新TreeA时，尽管声明式前端可以实现数据驱动的自动更新，但这一过程中却伴随着大量的diff操作，如图一所示。对于JS引擎而言，在对一个复杂组件树（深度超过30层，包含100至200个组件）执行diff算法时，几乎无法在120Hz的刷新率下保持满帧运行。然而，使用ArkUI的FrameNode扩展，框架能够自主掌控更新流程，实现高效的按需剪枝。特别是针对那些仅服务于少数特定业务的动态布局框架，利用这一扩展，可以实现极其迅速的更新操作。

图一 

图一

直接操作组件树

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

图二 

图二

场景示例

下面使用视频首页刷新图片资源作为场景，如图三所示，来介绍如何使用ArkUI的FrameNode扩展来实现。

图三

图三

ArkUI的声明式扩展使用

一个简化的动态布局类框架的DSL一般会使用JSON、XML等数据交换格式来描述UI，下面使用JSON为例进行说明。 本案例相关核心字段含义如下表所示：

标签含义
type描述UI组件的类型，通常与原生组件存在一一对应的关系，也可能是框架基于原生能力封装的某种组件
content文本，图片类组件的内容
css描述UI组件的布局特性
  1. 定义视频首页UI描述数据如下：
{
  "type": "Column",
  "css": {
    "width": "100%"
  },
  "children": [
    {
      "type": "Row",
      "css": {
        "width": "100%",
        "padding": {
          "left": 15,
          "right": 15
        },
        "margin": {
          "top": 5,
          "bottom": 5
        },
        "justifyContent": "FlexAlign.SpaceBetween"
      },
      "children": [
        {
          "type": "Text",
          "css": {
            "fontSize": 24,
            "fontColor": "#ffffff"
          },
          "content": "首页"
        },
        {
          "type": "Image",
          "css": {
            "width": 24,
            "height": 24
          },
          "content": "app.media.search"
        }
      ]
    },
    {
      "type": "Swiper",
      "css": {
        "width": "100%"
      },
      "children": [
        {
          "type": "Image",
          "css": {
            "height": "40%",
            "width": "100%"
          },
          "content": "app.media.movie1"
        },
        {
          "type": "Image",
          "css": {
            "height": "40%",
            "width": "100%"
          },
          "content": "app.media.movie2"
        },
        {
          "type": "Image",
          "css": {
            "height": "40%",
            "width": "100%"
          },
          "content": "app.media.movie3"
        }
      ]
    },
    {
      "type": "Row",
      "css": {
        "width": "100%",
        "padding": {
          "left": 15,
          "right": 15
        },
        "margin": {
          "top": 15,
          "bottom": 15
        },
        "justifyContent": "FlexAlign.SpaceBetween"
      },
      "children": [
        {
          "type": "Text",
          "css": {
            "width": 75,
            "height": 40,
            "borderRadius": 60,
            "fontColor": "#000000",
            "backgroundColor": "#ffffff"
          },
          "content": "精选"
        },
        {
          "type": "Text",
          "css": {
            "width": 75,
            "height": 40,
            "borderRadius": 60,
            "fontColor": "#000000",
            "backgroundColor": "#808080"
          },
          "content": "电视剧"
        },
        {
          "type": "Text",
          "css": {
            "width": 75,
            "height": 40,
            "borderRadius": 60,
            "fontColor": "#000000",
            "backgroundColor": "#808080"
          },
          "content": "电影"
        },
        {
          "type": "Text",
          "css": {
            "width": 75,
            "height": 40,
            "borderRadius": 60,
            "fontColor": "#000000",
            "backgroundColor": "#808080"
          },
          "content": "综艺"
        }
      ]
    },
    {
      "type": "Row",
      "css": {
        "width": "100%",
        "padding": {
          "left": 15,
          "right": 15
        },
        "margin": {
          "top": 5,
          "bottom": 5
        },
        "justifyContent": "FlexAlign.SpaceBetween"
      },
      "children": [
        {
          "type": "Text",
          "css": {
            "fontSize": 24,
            "fontColor": "#ffffff"
          },
          "content": "每日推荐"
        },
        {
          "type": "Text",
          "css": {
            "fontSize": 20,
            "fontColor": "#ffffff",
            "opacity": 0.5
          },
          "content": "更多"
        }
      ]
    },
    {
      "type": "Row",
      "css": {
        "width": "100%",
        "padding": {
          "left": 15,
          "right": 15
        },
        "margin": {
          "top": 5,
          "bottom": 5
        },
        "justifyContent": "FlexAlign.SpaceBetween"
      },
      "children": [
        {
          "type": "Column",
          "css": {
            "alignItems": "HorizontalAlign.Start"
          },
          "children": [
            {
              "type": "Image",
              "css": {
                "height": 120,
                "width": 170,
                "borderRadius": 10
              },
              "content": "app.media.movie4"
            },
            {
              "type": "Text",
              "css": {
                "fontColor": "#ffffff"
              },
              "content": "电影1"
            }
          ]
        },
        {
          "type": "Column",
          "css": {
            "alignItems": "HorizontalAlign.Start"
          },
          "children": [
            {
              "type": "Image",
              "css": {
                "height": 120,
                "width": 170,
                "borderRadius": 10
              },
              "content": "app.media.movie5"
            },
            {
              "type": "Text",
              "css": {
                "fontColor": "#ffffff"
              },
              "content": "电影2"
            }
          ]
        }
      ]
    },
    {
      "id": "refreshImage",
      "type": "Text",
      "css": {
        "width": 180,
        "height": 40,
        "borderRadius": 60,
        "fontColor": "#ffffff",
        "backgroundColor": "#0000FF"
      },
      "content": "刷新"
    }
  ]
}
  1. 定义相应数据结构用于接收UI描述数据，如下：
class VM {
  type?: string
  content?: string
  css?: ESObject
  children?: VM[]
  id?: string
}
  1. 自定义DSL解析逻辑，且使用carouselNodes保存轮播图节点，方便后续操作节点更新，如下：
// 存储图片节点，方便后续直接操作节点
let carouselNodes: typeNode.Image[] = [];

/**
 * 自定义DSL解析逻辑，将UI描述数据解析为组件
 *
 * @param vm
 * @param context
 * @returns
 */
function FrameNodeFactory(vm: VM, context: UIContext): FrameNode | null {
  if (vm.type === "Column") {
    let node = typeNode.createNode(context, "Column");
    setColumnNodeAttr(node, vm.css);
    vm.children?.forEach(kid => {
      let child = FrameNodeFactory(kid, context);
      node.appendChild(child);
    });
    return node;
  } else if (vm.type === "Row") {
    let node = typeNode.createNode(context, "Row");
    setRowNodeAttr(node, vm.css);
    vm.children?.forEach(kid => {
      let child = FrameNodeFactory(kid, context);
      node.appendChild(child);
    });
    return node;
  } else if (vm.type === "Swiper") {
    let node = typeNode.createNode(context, "Swiper");
    node.attribute.width(vm.css.width);
    node.attribute.height(vm.css.height);
    vm.children?.forEach(kid => {
      let child = FrameNodeFactory(kid, context);
      node.appendChild(child);
    });
    return node;
  } else if (vm.type === "Image") {
    let node = typeNode.createNode(context, "Image");
    node.attribute.width(vm.css.width);
    node.attribute.height(vm.css.height);
    node.attribute.borderRadius(vm.css.borderRadius);
    node.attribute.objectFit(ImageFit.Fill)
    node.initialize($r(vm.content));
    carouselNodes.push(node);
    return node;
  } else if (vm.type === "Text") {
    let node = typeNode.createNode(context, "Text");
    node.attribute.fontSize(vm.css.fontSize);
    node.attribute.width(vm.css.width);
    node.attribute.height(vm.css.height);
    node.attribute.width(vm.css.width)
    node.attribute.borderRadius(vm.css.borderRadius)
    node.attribute.backgroundColor(vm.css.backgroundColor);
    node.attribute.fontColor(vm.css.fontColor);
    node.attribute.opacity(vm.css.opacity);
    node.attribute.textAlign(TextAlign.Center)
    // 使用id来标识特殊节点，方便抽出来单独操作
    if (vm.id === 'refreshImage') {
      // 因为frameNode暂时没有Button组件，因此使用Text代替，给该组件绑定点击事件
      node.attribute.onClick(() => {
        carouselNodes[1].initialize($r('app.media.movie6'))
        carouselNodes[2].initialize($r('app.media.movie7'))
        carouselNodes[3].initialize($r('app.media.movie8'))
        carouselNodes[4].initialize($r('app.media.movie9'))
        carouselNodes[5].initialize($r('app.media.movie10'))
        node.attribute.visibility(Visibility.Hidden);
      })
    }
    node.initialize(vm.content);
    return node;
  }
  return null;
}

function setColumnNodeAttr(node: typeNode.Column, css: ESObject) {
  node.attribute.width(css.width);
  node.attribute.height(css.height);
  node.attribute.backgroundColor(css.backgroundColor);
  if (css.alignItems === "HorizontalAlign.Start") {
    node.attribute.alignItems(HorizontalAlign.Start)
  }
}

function setRowNodeAttr(node: typeNode.Row, css: ESObject) {
  node.attribute.width(css.width);
  if (css.padding !== undefined) {
    node.attribute.padding(css.padding as Padding)
  }
  if (css.margin !== undefined) {
    node.attribute.margin(css.margin as Padding)
  }
  node.attribute.justifyContent(FlexAlign.SpaceBetween)
}
  1. 使用NodeContainer组件嵌套ArkUI的FrameNode扩展和ArkUI的声明式语法，如下：
/**
 * 继承NodeController，用于绘制组件树
 */
class ImperativeController extends NodeController {
  makeNode(uiContext: UIContext): FrameNode | null {
    return FrameNodeFactory(data, uiContext);
  }
}

@Component
struct ImperativeView {
  controller: ImperativeController = new ImperativeController();

  build() {
    Column() {
      NodeContainer(this.controller)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Black)
  }
}

性能对比

下面以场景示例中的两种方案实现，通过DevEcho Studio的profile工具抓取Trace进行性能分析比对。

  1. 声明式前端开发模式下刷新图片资源场景的完成时延为9.8ms（根据设备和场景不同，数据会有差异，本数据仅供参考），如图四所示。

图四 

图四

  1. FrameNode扩展模式下刷新图片资源场景的完成时延为7.6ms（根据设备和场景不同，数据会有差异，本数据仅供参考），如图五所示。

图五 

图五

总结

综上所述，在动态布局类场景下，相对于声明式写法，使用ArkUI的FrameNode扩展更具有优势，能缩短响应时延,带来的性能收益更高。因此对于需要使用动态布局类框架的场景，建议优先使用ArkUI的FrameNode扩展来实现。

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）路线图、学习视频、文档用来跟着学习是非常有必要的。 

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员

鸿蒙 NEXT 全栈开发学习笔记  希望这一份鸿蒙学习文档能够给大家带来帮助~

鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.视频学习教程+学习PDF文档

HarmonyOS Next 最新全套视频教程

  纯血版鸿蒙全套学习文档（面试、文档、全套视频等）       

​​

总结

参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线

让开，我要吃人了
关注
  • 21
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于HarmonyOS NEXT Developer Beta1编写的app应用源代码，使用DevEco5.03版本编写
06-27
基于HarmonyOS NEXT Developer Beta1编写的app应用源代码，使用DevEco5.03版本编写，包含系统源代码，代码结构图，鸿蒙虚拟机运行效果图，预览器效果图等。在win11 版本测试通过。
HarmonyOS应用开发者基础认证考试题目及答案
12-17
HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目...
HarmonyOS应用开发者基础题库
12-29
【HarmonyOS应用开发者基础题库】主要涵盖了鸿蒙系统应用开发的基础知识，涉及DevEco Studio集成开发环境、 ArkTS编程语言、应用程序框架以及页面布局设计等方面。 1. **DevEco Studio**：它是华为提供的开发...
HarmonyOS应用开发者认证题目满分指南
01-27
【 HarmonyOS 应用开发者认证知识点详解】 HarmonyOS 是华为推出的一款面向全场景的分布式操作系统，旨在提供无缝跨设备的用户体验。为了帮助开发者快速掌握HarmonyOS应用开发，官方提供了"HarmonyOS第一课"系列...
DevEco Studio3.0Beta-HarmonyOS创建和运行HelloWorld
04-13
### DevEco Studio3.0 Beta - HarmonyOS 创建和运行 HelloWorld 工程 #### DevEco Studio 开发环境概述 DevEco Studio 是华为提供的专为 HarmonyOS 应用和服务开发设计的一体化集成开发环境(IDE)。通过 DevEco ...
【HarmonyOS】- HAR与HSP区别及使用原则
不靠谱先森的博客
09-08 367
HAR与HSP系统提供了两种共享包，HAR静态共享包和HSP动态共享包。HAR与HSP都是为了实现代码和资源的共享，都可以包含代码、C++库、资源和配置文件，最大的不同之处在于：HAR中的代码和资源跟随使用方编译，如果有多个使用方，它们的编译产物中会存在多份相同拷贝；而HSP中的代码和资源可以独立编译，在运行时进程中代码和资源也只会存在一份。
鸿蒙轻内核M核源码分析系列十七（2） 异常钩子函数的注册操作
鸿蒙开发知识记录
09-08 1218
本文中所涉及的源码，以内核为例，均可以在开源站点https://gitee.com/openharmony/kernel_liteos_m 获取。鸿蒙轻内核异常钩子模块代码主要在目录下。异常钩子函数的注册、解注册、异常钩子类型定义在。
鸿蒙（API 12 Beta6版）GPU加速引擎服务【自适应VRS】
鸿蒙的技术博客
09-08 886
XEngine Kit提供自适应VRS功能，其通过合理分配画面的计算资源，视觉无损降低渲染频次，使不同的渲染图像使用不同的渲染速率，能够有效提高渲染性能。
HarmonyOS应用开发（ Beta5.0）一杯冰美式的时间“拿捏Grid组件”
weixin_55362248的博客
09-08 1321
​这里呢是采用Grid组件中的控制滚动,里面的rowsTemplate属性为一行且不对列的行数属性进行操作，这样的话就可以控制水平滑动了。
鸿蒙双向认证
xo19882011的专栏
09-06 498
切换到鸿蒙也要用上双向认证。使用的其中的 rcp 功能，详细文档双向认证包含两个方向，分为客户端验证服务端的证书和服务端验证客户端的证书。
OpenHarmony鸿蒙（ Beta5.0）RTSPServer实现播放视频详解
最新发布
weixin_55362248的博客
09-11 746
openharmony中实现RTSPServer播放视频主要分为如下5部分。其中视频采集与视频编码平台芯片3518EV300与3516DV300已支持，将编码后的视频数据(H.265)存放至环形缓冲区，最后通过RTSPServer发送，RTSPClient由VLC播放器实现。
HarmonyOS学习(十)——网络编程
qi85481455的博客
09-10 1115
ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。
鸿蒙轻内核M核源码分析系列二一 02 文件系统LittleFS
鸿蒙开发知识记录
09-05 630
会分2部分来介绍结构体部分，先介绍LittleFS文件系统的结构体，然后介绍LiteOS-M内核中提供的和LittleFS相关的一些结构体。
HarmonyOS Next系列之实现一个左右露出中间大两边小带缩放动画的轮播图（十二）
pixle的博客
09-09 1153
HarmonyOS Next（基于API12）实现一个左右露出中间大两边小带缩放动画的轮播图。
鸿蒙（API 12 Beta6版）【ArkGraphics 3D场景搭建以及管理】方舟3D图形
鸿蒙的技术博客
09-05 1108
ArkGraphics 3D （方舟3D图形）基于轻量级的3D引擎以及渲染管线为开发者提供基础3D场景绘制能力，供开发者便捷、高效地构建3D场景并完成渲染。
鸿蒙轻内核M核源码分析系列十一(1) 信号量Semaphore
鸿蒙开发知识记录
09-06 1065
在文件定义的信号量控制块结构体为LosSemCB，结构体源代码如下。信号量状态.semStat取值，其他成员变量的注释见注释部分。/**< 信号量状态 *//**< 可用的信号量数量 *//**< 可用的信号量最大数量 *//**< 信号量Id *//**< 阻塞在该信号量的任务链表 */} LosSemCB;系统支持创建多少信号量是根据开发板情况使用宏定义的，每一个信号量semId是UINT32类型的，取值为，表示信号量池中各个的信号量的编号。
鸿蒙轻内核M核源码分析系列八 静态内存MemoryBox
鸿蒙开发知识记录
09-06 1203
静态内存结构体在文件中定义。源代码如下，⑴处定义的是静态内存节点结构体，⑵处定义的静态内存的结构体池信息结构体为，，结构体成员的解释见注释部分。/**< 静态内存池中空闲节点指针，指向下一个空闲节点 *//**< 静态内存池中空闲节点指针，指向下一个空闲节点 *//**< 静态内存池的内存块总数量 *//**< 静态内存池的已分配的内存块总数量 *//**< 指向下一个静态内存池 */#endif/**< 静态内存池的空闲内存块单向链表 */
鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP
鸿蒙开发知识记录
09-07 614
在文件定义的CPUP控制块结构体为OsCpupCB，结构体源代码如下，allTime记录该任务自系统启动以来运行的cycle数，startTime记录任务开始运行的时间，历史运行时间数组的10个元素记录最近10秒中每一秒中每个任务自系统启动以来运行的cycle数，其他结构体成员的解释见注释部分。/**< 任务编号 *//**< 任务状态 *//**< 总共运行的时间 *//**< 任务开始时间 *//**< 历史运行时间数组，其中OS_CPUP_HISTORY_RECORD_NUM为10 */
鸿蒙图表MPChart自定义样式（五）左y轴显示数值，右y轴显示百分比
liuhaikang的博客
09-06 404
【代码】鸿蒙图表MPChart自定义样式（五）左y轴显示数值，右y轴显示百分比。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值