鸿蒙开发实战案例:使用ArkUI的FrameNode扩展实现动态
2025-04-08 本文已影响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 // 视频首页
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
https://gitee.com/MNxiaona/733GH/blob/master/jianshu
