Flutter SDUI框架插件mirai的使用

但根据其提供的文档和示例代码，我们可以了解这是一个强大的服务器驱动UI框架（Server-Driven UI, SDUI），允许您使用JSON在实时构建美丽且跨平台的应用程序，而无需重新部署应用程序即可进行设计更改。

项目信息

简介

Mirai 是一个用于Flutter的强大SDUI框架，它使您可以使用JSON实时动态构建UI，支持移动、Web或桌面应用程序的跨平台开发，并简化了UI交付过程，增强了灵活性。

特性包括：

• 🛠️ 动态构建UI：通过JSON配置即时更新应用程序的UI。
• 🌍 跨平台：一次编写，任意渲染——Flutter完成其余的工作。
• ⚡ 快速迭代：在服务器上进行更改并实时查看效果。

安装

首先，在pubspec.yaml文件中添加Mirai。

通过以下命令安装插件：

flutter pub add mirai

使用方法

初始化Mirai

在main.dart中导入Mirai包并在main函数中初始化它。

import 'package:mirai/mirai.dart';

void main() async {
  await Mirai.initialize();

  runApp(const MyApp());
}

您还可以指定自定义解析器和Dio实例：

void main() async {
  final dio = Dio();

  await Mirai.initialize(
    parsers: const [
      ExampleScreenParser(),
    ],
    dio: dio,
  );

  runApp(const MyApp());
}

替换MaterialApp为MiraiApp

最后，将您的MaterialApp替换为MiraiApp，并通过调用Mirai.fromJson(json, context)来加载您的JSON数据。

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

  @override
  Widget build(BuildContext context) {
    return MiraiApp(
      title: 'Mirai Demo',
      homeBuilder: (context) => Mirai.fromJson(json, context),
    );
  }
}

示例代码

这里是一个简单的表单界面的例子。

JSON配置

这是表单的JSON配置，包含文本输入框、密码输入框以及提交按钮等组件。

{
  "type": "scaffold",
  "appBar": {
    "type": "appBar",
    "title": {
      "type": "text",
      "data": "Text Field",
      "style": {
        "color": "#ffffff",
        "fontSize": 21
      }
    },
    "backgroundColor": "#4D00E9"
  },
  "backgroundColor": "#ffffff",
  "body": {
    "type": "singleChildScrollView",
    "child": {
      "type": "container",
      "padding": {
        "left": 12,
        "right": 12,
        "top": 12,
        "bottom": 12
      },
      "child": {
        "type": "column",
        "mainAxisAlignment": "center",
        "crossAxisAlignment": "center",
        "children": [
          // ... [省略部分重复代码] ...
          {
            "type": "elevatedButton",
            "child": {
              "type": "text",
              "data": "Submit"
            },
            "style": {
              "backgroundColor": "#4D00E9",
              "padding": {
                "top": 8,
                "left": 12,
                "right": 12,
                "bottom": 8
              }
            },
            "onPressed": {}
          }
        ]
      }
    }
  }
}

Flutter代码

下面是与上述JSON配置对应的Flutter代码片段。

import 'package:flutter/material.dart';
import 'package:mirai/mirai.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MiraiApp(
      title: 'Mirai Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Mirai.fromNetwork(
        MiraiRequest(
          url: _url, // 这里应该是你的JSON文件地址
          method: Method.get,
        ),
      ),
    );
  }
}

注意：Mirai提供了多种方法来解析JSON到Flutter小部件。你可以使用Mirai.fromNetwork()、Mirai.fromJson()和Mirai.fromAsset()。

以上就是关于这个所谓“未知功能”的插件Mirai的基本介绍和使用方法。如果您有兴趣了解更多，请访问Mirai Playground尝试在线实验，或者阅读官方文档获取详细指南和更多例子。