HarmonyOS开发者社区

动态生成页面实践案例

场景描述

下面使用视频首页刷新图片资源作为场景，来介绍如何使用ArkUI的FrameNode来实现动态布局。

ArkUI的声明式扩展使用

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

定义视频应用首页UI描述数据，在resources/rawfile目录下创建structure.json文件，内容如下。

{
  "type": "Column",
  "css": {
    "width": "100%"
  },
  "children": [
    // ...
  ]
}

定义相应数据结构用于接收UI描述数据，代码示例如下。

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