Flutter JSON动态UI生成插件json_dynamic_widget_generator的使用

特性

• 生成构建器
• 处理子元素参数（child/children）
• 支持传递key参数
• 定义自定义构建器名称
• 序列化Material主题类

开始使用

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

dependencies:
  json_dynamic_widget_annotation: ^0.0.1

dev_dependencies:
  json_dynamic_widget_generator: ^0.0.1
  
  build_runner: ^2.0.0

运行以下命令以安装依赖：

flutter pub get

使用方法

1. 在需要生成动态UI的Widget上添加@JsonDynamicWidgetAnnotation()注解，并生成对应的.g.dart和.json_component.dart文件。

以下是示例代码：

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart' as _html;
// 导入注解库
import 'package:json_dynamic_widget_annotation/json_dynamic_widget_annotation.dart';

part 'html_widget.g.dart';       // 自动生成的构建器文件
part 'html_widget.json_component.dart'; // 自动生成的JSON组件文件

// 使用注解标记该Widget可以被动态生成
@JsonDynamicWidgetAnnotation()
class HtmlWidget extends StatelessWidget {
  const HtmlWidget(this.html, {Key? key}) : super(key: key);

  final String html;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _html.HtmlWidget(html); // 使用HtmlWidget显示HTML内容
  }
}

// 注册生成的构建器
HtmlWidgetBuilder.register(JsonWidgetRegistry.instance);

1. 运行build_runner生成构建器文件：

flutter pub run build_runner build

示例代码

以下是一个完整的示例代码，展示了如何使用json_dynamic_widget_generator生成动态UI。

import 'package:example/test_widget.dart';
import 'package:flutter/material.dart';
import 'package:json_dynamic_widget/json_dynamic_widget.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();

    // 注册自定义构建器
    SomeTextWidgetBuilder.register();
    WRChildBuilder.register();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: const JsonWidget(
        json: {
          'type': 'w_r_child', // 动态UI类型
          'args': {'color': '#00ff00'}, // 参数
          'child': {
            'type': 'center', // 子元素类型
            'child': {
              'type': 'some_text_widget', // 自定义Widget类型
              'args': {
                'html': 'someHtml', // HTML内容
                'color': '#ff0000', // 颜色参数
              },
            },
          },
        },
      ),
    );
  }
}

class JsonWidget extends StatefulWidget {
  const JsonWidget({Key? key, required this.json}) : super(key: key);

  final Map<String, dynamic> json;

  [@override](/user/override)
  State<JsonWidget> createState() => _JsonWidgetState();
}

class _JsonWidgetState extends State<JsonWidget> {
  late final JsonWidgetData _data;

  [@override](/user/override)
  void initState() {
    super.initState();
    _data = JsonWidgetData.fromDynamic(widget.json)!;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _data.build(context: context); // 构建动态UI
  }
}