在 Flutter 中将字符串解析为小部件答案

【问题标题】：Parse string to widget in Flutter在 Flutter 中将字符串解析为小部件
【发布时间】：2020-02-07 15:08:41
【问题描述】：

我想将以下字符串解析为等效的 Flutter 小部件：

String fetchedFromServer = '''
Container(
   child: Text("Hello")
)
''';

我想从网络服务器接收布局并将它们解析为真正的小部件。

我如何在 Dart/Flutter 中做到这一点。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

你可能必须自己创建解析和渲染机制，因为我认为 Flutter 不支持服务器端渲染（可能除了 Flutter Web 之外，虽然我还没有听到任何消息那里）。

此外，您可能希望以 JSON 或其他数据格式返回布局数据。对于初学者来说，解析和处理会容易得多。但是，除此之外，如果您想基于原始 Dart 渲染 UI，您必须有效地设置您的应用程序，以便能够从字符串运行任意 Dart 代码，这不仅在 Dart/Flutter 中很难管理，而且让您面临无数潜在的安全问题。

回到主题，假设您有以下 UI 数据：

{
  "class": "Container",
  "child": {
    "class": "Text",
    "value": "Hello"
  }
}

在您的应用中，您可以这样解析：

Widget fetchUI(url) {
  // TODO: Make network call to get response
  final data = json.decode(response.body);
  return parseWidget(data);
}

Widget parseWidget(data) {
  switch(data['class']) {
    case 'Container':
      return Container(
        child: parseWidget(data['child']),
      );
    case 'Text':
      return Text(data['value']);
  }
  return null;
}

【讨论】：

很好的解决方案，谢谢。虽然有一个与你的答案相关的包，pub.dev/packages/dynamic_widget，但最后；将复杂的颤振小部件布局转换为 json 字符串很痛苦

【解决方案2】：

一个选择是使用这个包

https://pub.dev/packages/flutter_widget_from_html

并将所需的布局存储为 HTML。请记住，它只能支持基本的小部件和布局，但您不必自己编写解析器。

【讨论】：

【解决方案3】：

实际上有一个新的project 旨在完全按照您的意愿行事。我自己没有尝试过，但它似乎正在工作。另一个好处是它不会将 html 或任何其他标记语言呈现，而是将 Json 呈现为原生 Flutter 小部件。

【讨论】：