如何在 Flutter 中实现配置驱动的布局？答案

【问题标题】：How to implement config driven layouts in Flutter?如何在 Flutter 中实现配置驱动的布局？
【发布时间】：2020-09-30 00:47:17
【问题描述】：

我是 Flutter 的新手，所以想知道我们如何实现这一点。这个想法是通过在应用程序开始/导航之前获取其相应的 JSON 来在任何给定页面上呈现动态布局。这可以在 React / React Native 中完成，因为它允许根据键值映射（字符串键到组件）动态加载组件。

JSON是嵌套的，最好是这种JS格式，

{
component: {
  widget_name: 'Page1' // Should map to predefined widget name Page1 in my Flutter code
  data: {
    title: 'Something',
    ...
  }
  styles: {
   paddings: 4,
   ... 
  },
  children: {
    row: [
      ...same structure as parent,
      ...same structure as parent,
    ]
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以使用json to dart 门户了解您的情况。在此处复制粘贴您的 json 和模型名称。然后就可以生成dart模型文件了。

【讨论】：

感谢您的回答。 Dart 模型将存在于代码中，这是正确的。但是如何用这个模型映射我的数据，以便我可以根据我的配置更改布局？我的配置将具有应用程序和数据的布局结构。然后我会在 dart 代码中构建一个解析器来读取这个布局结构并将小部件名称映射到相应的小部件组件。