使用ArkUI的FrameNode扩展实现动态布局类框架

{
  "type": "Column",
  "css": {
    "width": "100%"
  },
  "children": [
    {
      "type": "Row",
      "css": {
        "width": "100%",
        "padding": {
          "left": 15,
          "right": 15
        },
        "margin": {
          "top": 5,
          "bottom": 5
        },
        ...
      },
      ...
    },
    ...
  ]
}

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

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) {
  ...
}

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)
  }
}

imperativedynamiclayouts                           // har类型
|---jsonpage                                       // 存放描述UI的数据文件
|---|---foo.json                                   // 描述UI的数据
|---view                                           // 视图
|---|---ImperativeView.ets                         // 视频首页

git init
git config core.sparsecheckout true
echo /code/UI/ImperativeDynamicLayouts/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master