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

鸿蒙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描述数据如下：
  1. {
  2.   "type": "Column",
  3.   "css": {
  4.     "width": "100%"
  5.   },
  6.   "children": [
  7.     {
  8.       "type": "Row",
  9.       "css": {
  10.         "width": "100%",
  11.         "padding": {
  12.           "left": 15,
  13.           "right": 15
  14.         },
  15.         "margin": {
  16.           "top": 5,
  17.           "bottom": 5
  18.         },
  19.         "justifyContent": "FlexAlign.SpaceBetween"
  20.       },
  21.       "children": [
  22.         {
  23.           "type": "Text",
  24.           "css": {
  25.             "fontSize": 24,
  26.             "fontColor": "#ffffff"
  27.           },
  28.           "content": "首页"
  29.         },
  30.         {
  31.           "type": "Image",
  32.           "css": {
  33.             "width": 24,
  34.             "height": 24
  35.           },
  36.           "content": "app.media.search"
  37.         }
  38.       ]
  39.     },
  40.     {
  41.       "type": "Swiper",
  42.       "css": {
  43.         "width": "100%"
  44.       },
  45.       "children": [
  46.         {
  47.           "type": "Image",
  48.           "css": {
  49.             "height": "40%",
  50.             "width": "100%"
  51.           },
  52.           "content": "app.media.movie1"
  53.         },
  54.         {
  55.           "type": "Image",
  56.           "css": {
  57.             "height": "40%",
  58.             "width": "100%"
  59.           },
  60.           "content": "app.media.movie2"
  61.         },
  62.         {
  63.           "type": "Image",
  64.           "css": {
  65.             "height": "40%",
  66.             "width": "100%"
  67.           },
  68.           "content": "app.media.movie3"
  69.         }
  70.       ]
  71.     },
  72.     {
  73.       "type": "Row",
  74.       "css": {
  75.         "width": "100%",
  76.         "padding": {
  77.           "left": 15,
  78.           "right": 15
  79.         },
  80.         "margin": {
  81.           "top": 15,
  82.           "bottom": 15
  83.         },
  84.         "justifyContent": "FlexAlign.SpaceBetween"
  85.       },
  86.       "children": [
  87.         {
  88.           "type": "Text",
  89.           "css": {
  90.             "width": 75,
  91.             "height": 40,
  92.             "borderRadius": 60,
  93.             "fontColor": "#000000",
  94.             "backgroundColor": "#ffffff"
  95.           },
  96.           "content": "精选"
  97.         },
  98.         {
  99.           "type": "Text",
  100.           "css": {
  101.             "width": 75,
  102.             "height": 40,
  103.             "borderRadius": 60,
  104.             "fontColor": "#000000",
  105.             "backgroundColor": "#808080"
  106.           },
  107.           "content": "电视剧"
  108.         },
  109.         {
  110.           "type": "Text",
  111.           "css": {
  112.             "width": 75,
  113.             "height": 40,
  114.             "borderRadius": 60,
  115.             "fontColor": "#000000",
  116.             "backgroundColor": "#808080"
  117.           },
  118.           "content": "电影"
  119.         },
  120.         {
  121.           "type": "Text",
  122.           "css": {
  123.             "width": 75,
  124.             "height": 40,
  125.             "borderRadius": 60,
  126.             "fontColor": "#000000",
  127.             "backgroundColor": "#808080"
  128.           },
  129.           "content": "综艺"
  130.         }
  131.       ]
  132.     },
  133.     {
  134.       "type": "Row",
  135.       "css": {
  136.         "width": "100%",
  137.         "padding": {
  138.           "left": 15,
  139.           "right": 15
  140.         },
  141.         "margin": {
  142.           "top": 5,
  143.           "bottom": 5
  144.         },
  145.         "justifyContent": "FlexAlign.SpaceBetween"
  146.       },
  147.       "children": [
  148.         {
  149.           "type": "Text",
  150.           "css": {
  151.             "fontSize": 24,
  152.             "fontColor": "#ffffff"
  153.           },
  154.           "content": "每日推荐"
  155.         },
  156.         {
  157.           "type": "Text",
  158.           "css": {
  159.             "fontSize": 20,
  160.             "fontColor": "#ffffff",
  161.             "opacity": 0.5
  162.           },
  163.           "content": "更多"
  164.         }
  165.       ]
  166.     },
  167.     {
  168.       "type": "Row",
  169.       "css": {
  170.         "width": "100%",
  171.         "padding": {
  172.           "left": 15,
  173.           "right": 15
  174.         },
  175.         "margin": {
  176.           "top": 5,
  177.           "bottom": 5
  178.         },
  179.         "justifyContent": "FlexAlign.SpaceBetween"
  180.       },
  181.       "children": [
  182.         {
  183.           "type": "Column",
  184.           "css": {
  185.             "alignItems": "HorizontalAlign.Start"
  186.           },
  187.           "children": [
  188.             {
  189.               "type": "Image",
  190.               "css": {
  191.                 "height": 120,
  192.                 "width": 170,
  193.                 "borderRadius": 10
  194.               },
  195.               "content": "app.media.movie4"
  196.             },
  197.             {
  198.               "type": "Text",
  199.               "css": {
  200.                 "fontColor": "#ffffff"
  201.               },
  202.               "content": "电影1"
  203.             }
  204.           ]
  205.         },
  206.         {
  207.           "type": "Column",
  208.           "css": {
  209.             "alignItems": "HorizontalAlign.Start"
  210.           },
  211.           "children": [
  212.             {
  213.               "type": "Image",
  214.               "css": {
  215.                 "height": 120,
  216.                 "width": 170,
  217.                 "borderRadius": 10
  218.               },
  219.               "content": "app.media.movie5"
  220.             },
  221.             {
  222.               "type": "Text",
  223.               "css": {
  224.                 "fontColor": "#ffffff"
  225.               },
  226.               "content": "电影2"
  227.             }
  228.           ]
  229.         }
  230.       ]
  231.     },
  232.     {
  233.       "id": "refreshImage",
  234.       "type": "Text",
  235.       "css": {
  236.         "width": 180,
  237.         "height": 40,
  238.         "borderRadius": 60,
  239.         "fontColor": "#ffffff",
  240.         "backgroundColor": "#0000FF"
  241.       },
  242.       "content": "刷新"
  243.     }
  244.   ]
  245. }
  1. 定义相应数据结构用于接收UI描述数据，如下：
  1. class VM {
  2.   type?: string
  3.   content?: string
  4.   css?: ESObject
  5.   children?: VM[]
  6.   id?: string
  7. }
  1. 自定义DSL解析逻辑，且使用carouselNodes保存轮播图节点，方便后续操作节点更新，如下：
  1. // 存储图片节点，方便后续直接操作节点
  2. let carouselNodes: typeNode.Image[] = [];
  3.  
  4. /**
  5.  * 自定义DSL解析逻辑，将UI描述数据解析为组件
  6.  *
  7.  * @param vm
  8.  * @param context
  9.  * @returns
  10.  */
  11. function FrameNodeFactory(vm: VM, context: UIContext): FrameNode | null {
  12.   if (vm.type === "Column") {
  13.     let node = typeNode.createNode(context, "Column");
  14.     setColumnNodeAttr(node, vm.css);
  15.     vm.children?.forEach(kid => {
  16.       let child = FrameNodeFactory(kid, context);
  17.       node.appendChild(child);
  18.     });
  19.     return node;
  20.   } else if (vm.type === "Row") {
  21.     let node = typeNode.createNode(context, "Row");
  22.     setRowNodeAttr(node, vm.css);
  23.     vm.children?.forEach(kid => {
  24.       let child = FrameNodeFactory(kid, context);
  25.       node.appendChild(child);
  26.     });
  27.     return node;
  28.   } else if (vm.type === "Swiper") {
  29.     let node = typeNode.createNode(context, "Swiper");
  30.     node.attribute.width(vm.css.width);
  31.     node.attribute.height(vm.css.height);
  32.     vm.children?.forEach(kid => {
  33.       let child = FrameNodeFactory(kid, context);
  34.       node.appendChild(child);
  35.     });
  36.     return node;
  37.   } else if (vm.type === "Image") {
  38.     let node = typeNode.createNode(context, "Image");
  39.     node.attribute.width(vm.css.width);
  40.     node.attribute.height(vm.css.height);
  41.     node.attribute.borderRadius(vm.css.borderRadius);
  42.     node.attribute.objectFit(ImageFit.Fill)
  43.     node.initialize($r(vm.content));
  44.     carouselNodes.push(node);
  45.     return node;
  46.   } else if (vm.type === "Text") {
  47.     let node = typeNode.createNode(context, "Text");
  48.     node.attribute.fontSize(vm.css.fontSize);
  49.     node.attribute.width(vm.css.width);
  50.     node.attribute.height(vm.css.height);
  51.     node.attribute.width(vm.css.width)
  52.     node.attribute.borderRadius(vm.css.borderRadius)
  53.     node.attribute.backgroundColor(vm.css.backgroundColor);
  54.     node.attribute.fontColor(vm.css.fontColor);
  55.     node.attribute.opacity(vm.css.opacity);
  56.     node.attribute.textAlign(TextAlign.Center)
  57.     // 使用id来标识特殊节点，方便抽出来单独操作
  58.     if (vm.id === 'refreshImage') {
  59.       // 因为frameNode暂时没有Button组件，因此使用Text代替，给该组件绑定点击事件
  60.       node.attribute.onClick(() => {
  61.         carouselNodes[1].initialize($r('app.media.movie6'))
  62.         carouselNodes[2].initialize($r('app.media.movie7'))
  63.         carouselNodes[3].initialize($r('app.media.movie8'))
  64.         carouselNodes[4].initialize($r('app.media.movie9'))
  65.         carouselNodes[5].initialize($r('app.media.movie10'))
  66.         node.attribute.visibility(Visibility.Hidden);
  67.       })
  68.     }
  69.     node.initialize(vm.content);
  70.     return node;
  71.   }
  72.   return null;
  73. }
  74.  
  75. function setColumnNodeAttr(node: typeNode.Column, css: ESObject) {
  76.   node.attribute.width(css.width);
  77.   node.attribute.height(css.height);
  78.   node.attribute.backgroundColor(css.backgroundColor);
  79.   if (css.alignItems === "HorizontalAlign.Start") {
  80.     node.attribute.alignItems(HorizontalAlign.Start)
  81.   }
  82. }
  83.  
  84. function setRowNodeAttr(node: typeNode.Row, css: ESObject) {
  85.   node.attribute.width(css.width);
  86.   if (css.padding !== undefined) {
  87.     node.attribute.padding(css.padding as Padding)
  88.   }
  89.   if (css.margin !== undefined) {
  90.     node.attribute.margin(css.margin as Padding)
  91.   }
  92.   node.attribute.justifyContent(FlexAlign.SpaceBetween)
  93. }
  1. 使用NodeContainer组件嵌套ArkUI的FrameNode扩展和ArkUI的声明式语法，如下：
  1. /**
  2.  * 继承NodeController，用于绘制组件树
  3.  */
  4. class ImperativeController extends NodeController {
  5.   makeNode(uiContext: UIContext): FrameNode | null {
  6.     return FrameNodeFactory(data, uiContext);
  7.   }
  8. }
  9.  
  10. @Component
  11. struct ImperativeView {
  12.   controller: ImperativeController = new ImperativeController();
  13.  
  14.   build() {
  15.     Column() {
  16.       NodeContainer(this.controller)
  17.     }
  18.     .height('100%')
  19.     .width('100%')
  20.     .backgroundColor(Color.Black)
  21.   }
  22. }

性能对比

下面以场景示例中的两种方案实现，通过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 最新全套视频教程

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

​​

总结

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

鸿蒙NEXT全套学习资料
微信名片
注：本文转载自blog.csdn.net的让开，我要吃人了的文章"https://blog.csdn.net/weixin_55362248/article/details/142178403"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！