Flutter动态界面生成插件dynamic_widget的使用

以下是根据您提供的内容整理的关于“Flutter动态界面生成插件dynamic_widget的使用”的完整示例demo：

Flutter 动态界面生成插件 dynamic_widget 的使用

介绍

dynamic_widget 是一个后端驱动的UI工具包，通过 JSON 来构建动态UI。JSON 格式非常类似于 Flutter 小部件代码。

安装

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  dynamic_widget: ^3.0.3

2. 安装依赖

在终端中运行以下命令安装依赖：

$ flutter packages get

3. 导入库

在 Dart 文件中导入 dynamic_widget 库：

import 'package:dynamic_widget/dynamic_widget.dart';

开始使用

你可以使用 DynamicWidgetBuilder().build 方法将 JSON 字符串转换为 Flutter 小部件。建议使用 FutureBuilder 构建 UI 以避免阻塞主线程。

import 'package:dynamic_widget/dynamic_widget.dart';

class PreviewPage extends StatelessWidget {
  final String jsonString;

  PreviewPage(this.jsonString);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Preview"),
      ),
      body: FutureBuilder<Widget>(
        future: _buildWidget(context),
        builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
          if (snapshot.hasError) {
            print(snapshot.error);
          }
          return snapshot.hasData
              ? SizedBox.expand(
                  child: snapshot.data,
                )
              : Text("Loading...");
        },
      ),
    );
  }

  Future<Widget> _buildWidget(BuildContext context) async {
    return DynamicWidgetBuilder.build(jsonString, context, new DefaultClickListener());
  }
}

实现 WidgetParser

要实现自定义的小部件解析器，你需要继承 WidgetParser 抽象类并实现 parse 方法。然后将其添加到解析器列表中。

import 'package:dynamic_widget/dynamic_widget/utils.dart';
import 'package:dynamic_widget/dynamic_widget.dart';
import 'package:flutter/material.dart';

class RaisedButtonParser extends WidgetParser {
  [@override](/user/override)
  String get widgetName => "RaisedButton";

  [@override](/user/override)
  Widget parse(Map<String, dynamic> map, BuildContext buildContext, ClickListener listener) {
    String clickEvent = map.containsKey("click_event") ? map['click_event'] : "";

    var raisedButton = RaisedButton(
      color: map.containsKey('color') ? parseHexColor(map['color']) : null,
      disabledColor: map.containsKey('disabledColor')
          ? parseHexColor(map['disabledColor'])
          : null,
      disabledElevation: map.containsKey('disabledElevation') ? map['disabledElevation']?.toDouble() : 0.0,
      disabledTextColor: map.containsKey('disabledTextColor')
          ? parseHexColor(map['disabledTextColor'])
          : null,
      elevation: map.containsKey('elevation') ? map['elevation']?.toDouble() : 0.0,
      padding: map.containsKey('padding')
          ? parseEdgeInsetsGeometry(map['padding'])
          : null,
      splashColor: map.containsKey('splashColor')
          ? parseHexColor(map['splashColor'])
          : null,
      textColor: map.containsKey('textColor') ? parseHexColor(map['textColor']) : null,
      child: DynamicWidgetBuilder.buildFromMap(map['child'], buildContext, listener),
      onPressed: () {
        listener.onClicked(clickEvent);
      },
    );

    return raisedButton;
  }
}

DynamicWidgetBuilder.addParser(RaisedButtonParser());

添加点击监听器

你可以在 JSON 定义中添加 "click_event" 属性来定义点击事件。例如：

var raisedButton_json = '''
{
  "type": "Container",
  "alignment": "center",
  "child": {
    "type": "RaisedButton",
    "color": "#FF00FF",
    "padding": "8,8,8,8",
    "textColor": "#00FF00",
    "elevation" : 8.0,
    "splashColor" : "#00FF00",
    "click_event" : "route://productDetail?goods_id=123",
    "child" : {
      "type": "Text",
      "data": "I am a button"
    }
  }
}
''';

定义一个点击监听器：

class DefaultClickListener implements ClickListener {
  [@override](/user/override)
  void onClicked(String event) {
    print("Receive click event: " + event);
  }
}

最后，将监听器传递给构建方法：

Future<Widget> _buildWidget() async {
  return DynamicWidgetBuilder.build(jsonString, buildContext, new DefaultClickListener());
}

如何编写 JSON 代码

你可以使用 DynamicWidgetJsonExportor 组件将 Flutter 代码导出为 JSON 代码。只需用 DynamicWidgetJsonExportor 包裹你的 Flutter 代码，并调用其 exportJsonString() 方法即可。

class _JSONExporterState extends State<JSONExporter> {
  GlobalKey key = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("export example"),
      ),
      body: Builder(
        builder: (context) => Column(
          children: [
            Expanded(
              child: DynamicWidgetJsonExportor(
                key: key,
                child: Stack(
                  alignment: Alignment.topLeft,
                  children: [
                    Image.asset("assets/vip.png"),
                    Positioned(
                      child: Image.asset("assets/vip.png"),
                      top: 50,
                      left: 50,
                    )
                  ],
                ),
              ),
            ),
            Container(
              child: ElevatedButton(
                child: Text("Export"),
                onPressed: () {
                  var exportor = key.currentWidget as DynamicWidgetJsonExportor;
                  var exportJsonString = exportor.exportJsonString();
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                      content: Text("json string was exported to editor page.")));
                  Future.delayed(Duration(seconds: 1), () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => CodeEditorPage(exportJsonString)));
                  });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}