HarmonyOS Next中如何对ArkUI声明式进行扩展使用？

Question

如题：HarmonyOS Next中如何对ArkUI声明式进行扩展使用？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

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

标签	含义
type	描述UI组件的类型，通常与原生组件存在一一对应的关系，也可能是框架基于原生能力封装的某种组件
content	文本，图片类组件的内容
css	描述UI组件的布局特性
children	当前组件的子组件

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

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

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

export 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 {
  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') {
    // ...
  } else if (vm.type === 'Swiper') {
    // ...
  } else if (vm.type === 'Image') {
    // ...
  } else if (vm.type === 'Text') {
    // ...
  }
  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);
}

使用NodeContainer组件嵌套ArkUI的FrameNode扩展和ArkUI的声明式语法

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

@Component
export struct ImperativePage {
  private controller: ImperativeController = new ImperativeController();

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

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。