Flutter JSON布局生成插件flutter_json_layout的使用

Flutter JSON布局生成插件flutter_json_layout的使用

公司业务需要动态下发打印票据的模板，使用 Flutter 进行绘制，最终实现票据模板的打印。

设计理念

将 Flutter Widget 映射成 JSON 文件，使用 JSON 制作布局文件，下发到端上，由端上进行数据组装，完成最后一步渲染。

使用方式

DynamicJsonLayout(
  tempJson: '布局的转义json',
  data: '数据映射的转义json',
)

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 flutter_json_layout 插件来创建一个简单的票据模板页面。

import 'package:example/test/test_config.dart'; // 引入测试配置
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; // 引入屏幕适配库
import 'page/code_edt_page.dart'; // 引入代码编辑页
import 'widget/common_widget.dart'; // 引入通用组件
import 'widget/module_api_list_widget.dart'; // 引入模块API列表组件
import 'widget/module_desc_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 ScreenUtilInit(
      designSize: const Size(960, 540), // 设计尺寸
      builder: (context, screenChild) {
        return MaterialApp(
          title: '动态化票据模版工具', // 应用标题
          theme: ThemeData(
            primarySwatch: Colors.blue, // 主题颜色
            bottomAppBarTheme: const BottomAppBarTheme(
              color: Colors.white38, // 底部导航栏颜色
            ),
          ),
          home: screenChild, // 主页面
        );
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Align(
            alignment: Alignment.centerLeft, // 文本对齐方式
            child: Text(
              'Flutter Json Layout - 动态模板', // 应用标题
              textAlign: TextAlign.left,
            ),
          ),
        ),
        body: const _Home(), // 主页面内容
      ),
    );
  }
}

// 主页面状态
class _Home extends StatefulWidget {
  const _Home({Key? key}) : super(key: key);

  [@override](/user/override)
  State<_Home> createState() => _HomeState(); // 创建状态
}

class _HomeState extends State<_Home> {
  // 跳转到目标页面
  void _jump(Widget target) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) {
          return target; // 返回目标页面
        },
      ),
    );
  }

  // 页面主体内容
  Widget _body() {
    return Padding(
      padding: EdgeInsets.only(
        left: 40.w,
        top: 30.w,
        right: 40.w,
        bottom: 20.w,
      ),
      child: Row(
        children: [
          const ModuleDescWidget(), // 模块描述组件
          SizedBox(width: 20.w), // 空白间隔
          const ModuleApiListWidget(), // 模块API列表组件
          SizedBox(width: 20.w), // 空白间隔
          Container(
            padding: EdgeInsets.symmetric(horizontal: 20.w), // 容器内边距
            child: TextButton(
              onPressed: () {
                _jump(
                  const CodeEdtPage(
                    initialJsonTemp: TestConfig.tempJson, // 初始JSON模板
                    initialData: TestConfig.data, // 初始数据
                  ),
                );
              },
              child: Text(
                '点击预览&创建', // 按钮文本
                style: TextStyle(
                  fontSize: 14.w, // 字体大小
                  fontWeight: FontWeight.w500, // 字体粗细
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _body(); // 返回主体内容
  }
}