Flutter JSON动态组件渲染插件json_dynamic_widget_plugin_components的使用

Flutter JSON动态组件渲染插件json_dynamic_widget_plugin_components的使用

目录

• json_dynamic_widget_plugin_components
  • 目录
  • 在线示例
  • 简介
  • 关于
    • 依赖加载器
    • 依赖版本解析器
    • 组件规范
    • 组件值封装
  • 使用插件

在线示例

• Web

简介

此插件用于JSON Dynamic Widget，允许将一组JSON小部件组合成一个组件。

关于

依赖加载器

依赖项是由name和version组成的组合。

加载器用于从不同源加载原始格式的组件。

每个加载器都需要实现load方法：

Future<String?> load(Dependency dependency, BuildContext context);

目前支持的加载器有：

• AssetDependencyLoader：从资源加载依赖项。可以通过AssetPathResolver配置，指定如何根据依赖项解析路径。
• MemoryDependencyLoader：从内存映射中加载依赖项。
• CachedDependencyLoader：缓存子依赖项加载器的结果。

依赖版本解析器

依赖版本解析器允许定义自定义版本解析策略。例如，在缺少版本字符串时可以定义查找latest版本的逻辑。

每个加载器都需要实现resolve方法：

Future<String> resolve(String name, String? version, BuildContext context);

目前支持的版本解析器有：

• RequiredDependencyVersionResolver：要求依赖项中包含版本字符串，否则抛出错误。

组件规范

组件规范定义了版本、名称以及输入和输出集合。其内容只是用于构建组件的一组小部件。

字段定义：

• name - 组件名称
• version - 组件版本
• inputs - 输入变量及其默认值列表
• outputs - 可以在组件外部使用的输出变量列表
• content - 使用输入并生成输出变量的小部件组

示例：

name: centered_text
version: 1.0.0
inputs:
- name: text
  description: The text value
  defaultValue: ''
outputs: []
content:
  type: center
  listen:
  - text
  args:
    child:
      type: text
      args:
        text: "${'This text is centered:' + text ?? ''}"

组件值封装

每个组件都可以有自己的值。

为了避免名称冲突，每个组件都有自己的独立注册表。

每个组件允许定义自己的输入和输出：

• inputs - 组件可用的输入变量，调用方不传递任何值则使用默认值。如果输入值使用variables，则每次更新都会传递给组件注册表。
• outputs - 可以导出到调用者注册表的输出变量。调用方不传递任何值意味着特定变量不会导出到调用者注册表。

例如：

"type": "component",
"args": {
    "name": "header",
    "inputs": {
      "text": "Some text for the header"
    },
    "outputs": {
        "header_click_count" : "header1_click_count"
    }
}

使用插件

1. 绑定插件。

import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_plugin_components/json_dynamic_widget_plugin_components.dart';

void main() {
  // 确保Flutter的绑定已完成
  WidgetsFlutterBinding.ensureInitialized();

  // ...

  // 获取注册表的实例
  var registry = JsonWidgetRegistry.instance;

  // 将插件绑定到注册表。这是必要的，以便注册表能够找到插件提供的小部件
  JsonComponentsPluginRegistrar.registerDefaults(registry: registry).withLoader(
    CachedDependencyLoader(
      cachedLoader: AssetDependencyLoader(
        pathResolver: DirAssetPathResolver(
          basePath: 'assets/components', // {components_path}
          ext: Ext.json,
          extByDependencyName: {
            'centered_text': Ext.yaml,
          },
        ),
      ),
    ),
  );

  // ...
}

1. 创建包含组件数据的JSON文件，并将其放置在{components_path}/{component_name}/{version}.json中。

// {components_path}/custom_text_input/1.0.0.json
{
    "name": "custom_text_input",
    "version": "1.0.0",
    "inputs": [
        {
            "name": "label",
            "description": "The text input label",
            "defaultValue": ""
        },
        {
            "name": "hint",
            "description": "The text input hint",
            "defaultValue": ""
        }
    ],
    "outputs": [
        {
            "name": "text_input",
            "description": "The text input value"
        }
    ],
    "content": {
        "type": "text_form_field",
        "id": "text_input",
        "args": {
            "decoration": {
                "hintText": "${hint}",
                "labelText": "${label}",
                "suffixIcon": {
                    "type": "icon_button",
                    "args": {
                        "icon": {
                            "type": "icon",
                            "args": {
                                "icon": {
                                    "codePoint": 57704,
                                    "fontFamily": "MaterialIcons",
                                    "size": 50
                                }
                            }
                        },
                        "onPressed": "${set_value('text_input','')}"
                    }
                }
            },
            "validators": [
                {
                    "type": "required"
                }
            ]
        }
    }
}

1. 在json_dynamic_widget中使用组件。

"type": "component",
"args": {
    "name": "custom_text_input",
    "version": "1.0.0", 
    "inputs": {
        "label": "First name",
        "hind": "John"
    },
    "outputs": {
        "text_input": "first_name_input_value"
    }
}

示例代码

import 'dart:convert';

import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_plugin_components/json_dynamic_widget_plugin_components.dart';
import 'package:logging/logging.dart';

void main() async {
  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}');
    }
  });

  final navigatorKey = GlobalKey<NavigatorState>();

  final registry = JsonWidgetRegistry.instance;
  JsonComponentsPluginRegistrar.registerDefaults(registry: registry).withLoader(
    CachedDependencyLoader(
      cachedLoader: AssetDependencyLoader(
        pathResolver: DirAssetPathResolver(
          basePath: 'assets/components',
          ext: Ext.json,
          extByDependencyName: {
            'centered_text': Ext.yaml,
          },
        ),
      ),
    ),
  );

  registry.navigatorKey = navigatorKey;

  final data = JsonWidgetData.fromDynamic(
    json.decode(await rootBundle.loadString('assets/pages/components.json')),
    registry: registry,
  );

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ComponentWidgetPage(
        data: data,
      ),
      theme: ThemeData.light(),
    ),
  );
}

class ComponentWidgetPage extends StatelessWidget {
  const ComponentWidgetPage({
    super.key,
    required this.data,
  });
  final JsonWidgetData data;

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