Flutter动态JSON解析生成UI插件json_dynamic_widget_plugin

Flutter动态JSON解析生成UI插件`json_dynamic_widget_plugin_js`的使用

内容如下：

Live Example
Introduction
Using the Plugin

Live Example

Introduction

json_dynamic_widget_plugin_js 是对 JSON Dynamic Widget 的扩展插件，用于通过 vanilla JS 提供 Web 平台支持，并通过 Flutter JS 提供其他平台支持。

Using the Plugin

以下是使用 json_dynamic_widget_plugin_js 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_plugin_js/json_dynamic_widget_plugin_js.dart';
import 'package:flutter/services.dart'; // 引入 rootBundle 用于加载 JSON 文件
import 'package:logging/logging.dart'; // 引入日志工具

void main() async {
  // 初始化 Flutter 的绑定
  WidgetsFlutterBinding.ensureInitialized();

  // 配置日志记录器
  Logger.root.onRecord.listen((record) {
    debugPrint('${record.level.name}: ${record.time}: ${record.message}');
    if (record.error != null) {
      debugPrint('${record.error}');
    }
    if (record.stackTrace != null) {
      debugPrint('${record.stackTrace}');
    }
  });

  // 创建 Navigator 的全局 Key
  final navigatorKey = GlobalKey<NavigatorState>();

  // 获取 JSON 动态小部件注册表实例
  final registry = JsonWidgetRegistry.instance;

  // 绑定插件到注册表中，以便注册表能够找到插件提供的小部件
  JsonJsPlugin.bind(registry);

  // 将全局 Navigator Key 设置到注册表中
  registry.navigatorKey = navigatorKey;

  // 从 JSON 文件加载数据并解析为 JsonWidgetData 对象
  final data = JsonWidgetData.fromDynamic(
    json.decode(await rootBundle.loadString('assets/pages/js.json')),
  );

  // 启动应用
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JsWidgetPage(
        data: data,
      ),
      theme: ThemeData.light(),
    ),
  );
}

// 定义一个自定义页面类来渲染 JSON 数据
class JsWidgetPage extends StatelessWidget {
  const JsWidgetPage({
    super.key,
    required this.data,
  });

  final JsonWidgetData data;

  [@override](/user/override)
  Widget build(BuildContext context) => data.build(context: context);
}

更多关于Flutter动态JSON解析生成UI插件json_dynamic_widget_plugin_js的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼

更多关于Flutter动态JSON解析生成UI插件json_dynamic_widget_plugin_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

json_dynamic_widget_plugin_js 是一个用于 Flutter 的插件，它允许你通过动态 JSON 数据来生成 UI。这个插件的主要目的是让你能够通过 JSON 配置来动态构建和更新 Flutter 界面，而不需要硬编码 UI 组件。

安装插件

首先，你需要在 pubspec.yaml 文件中添加插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  json_dynamic_widget_plugin_js: ^<latest_version>

然后运行 flutter pub get 来安装插件。

基本用法

导入插件：

在你的 Dart 文件中导入插件：

import 'package:json_dynamic_widget_plugin_js/json_dynamic_widget_plugin_js.dart';

注册插件：

在初始化你的应用时，注册 json_dynamic_widget_plugin_js 插件：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 注册插件
  JsonDynamicWidgetPluginJs.register();
  
  runApp(MyApp());
}

解析 JSON 并生成 UI：

你可以通过 JSON 字符串来动态生成 UI。假设你有以下 JSON 数据：

{
  "type": "Scaffold",
  "args": {
    "appBar": {
      "type": "AppBar",
      "args": {
        "title": {
          "type": "Text",
          "args": {
            "data": "Dynamic UI"
          }
        }
      }
    },
    "body": {
      "type": "Center",
      "args": {
        "child": {
          "type": "Text",
          "args": {
            "data": "Hello, World!"
          }
        }
      }
    }
  }
}

你可以使用 JsonWidgetData.fromDynamic 来解析 JSON 并生成对应的 UI 组件：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final jsonData = '''
    {
      "type": "Scaffold",
      "args": {
        "appBar": {
          "type": "AppBar",
          "args": {
            "title": {
              "type": "Text",
              "args": {
                "data": "Dynamic UI"
              }
            }
          }
        },
        "body": {
          "type": "Center",
          "args": {
            "child": {
              "type": "Text",
              "args": {
                "data": "Hello, World!"
              }
            }
          }
        }
      }
    }
    ''';

    final widgetData = JsonWidgetData.fromDynamic(json.decode(jsonData));
    
    return MaterialApp(
      home: widgetData.build(context),
    );
  }
}

高级用法

自定义组件：

你可以通过 JsonWidgetRegistry 注册自定义组件，以便在 JSON 中使用。例如，假设你有一个自定义的 MyCustomWidget：

class MyCustomWidget extends StatelessWidget {
  final String title;

  MyCustomWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(title),
    );
  }
}

你可以这样注册它：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 注册插件
  JsonDynamicWidgetPluginJs.register();
  
  // 注册自定义组件
  JsonWidgetRegistry.instance.registerCustomBuilder('MyCustomWidget', (args) {
    return MyCustomWidget(title: args['title']);
  });
  
  runApp(MyApp());
}

然后在 JSON 中使用它：

{
  "type": "Scaffold",
  "args": {
    "body": {
      "type": "MyCustomWidget",
      "args": {
        "title": "Custom Widget"
      }
    }
  }
}

Flutter动态JSON解析生成UI插件json_dynamic_widget_plugin_js的使用