基于 flutter - widget 动态化，打印模板动态化方案

引言

近期有朋友私信，希望能出一篇关于打印模版动态化的设计方案。由于最近也比较忙，小编简单的整理了一下设计框架。

背景回顾

• 票据样式:  拒绝硬编码，直接使用 flutter-widget 进行样式开发，更加直观灵活
• 打印指令集:  不嵌入厂商的打印SDK，适配一码多用，无后续接入开发消耗
• 传输方式:  指令集传输方式可扩展，底层代码无需变动

重点思想：我们改变了之前使用硬编码的方式进行票据打印，将票据的样式改用 Flutter - widget 布局实现，最后使用光栅位图的统一标准进行指令集中转，得到我们要的打印指令的字节数据。

我们可以这样写票据样式：(build 方法内就是我们的票据样式内容)

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

// ignore: depend_on_referenced_packages
import 'package:print_image_generate_tool/print_image_generate_tool.dart';

// 标签样式 demo
class LabelTemp extends StatelessWidget with ATempWidget {
  final String data;

  const LabelTemp(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: ...widget写样式...
    );
  }

  @override
  int get pixelPagerWidth => 360; //1mm对应8像素，45mm 对应像素宽度为 360

  @override
  int get pixelPagerHeight => 560; //1mm对应8像素，70mm 对应像素高度为 560
}

最后打印出来的票据样例如下：

动态化设计

既然我们是使用的 widget 绘制票据内容，只要我们解决了 flutter-widget 层的动态化设计，我们的打印模板就实现了动态化。

小编将动态模板设计成两个部分：

• 布局文件 （对于后管，需要动态下发的就是布局文件（规定格式的 json 文件））

  我们将常用的布局元素例如：文本块、行、列、大小容器、权重控件、Padding 等进行映射封装，使其可以接受 json 进行转换成 widget。

  这些布局元素固定的结构如下：

  {
      "type": "元素类型"，
  }
  

  只有一个固定字段type用于标识元素类型，根据type对应的类型自行扩展字段。举几个例子：

  文本元素示例：

  {
       "type": "text",
       "key": "[*{takeType}]",
       "fontSize": 30.0,
       "lineHeight": 1.0,
       "fontWeight": "8"
  }
  

  图片元素示例：

  {
      "type": "img",
      "width": 100,
      "height": 100,
      "url": "url"
  }
  

  列元素示例：

  {
      "type": "colum",
      "mainAxisSize": "min",
      "mainAxisAlignment": null,
      "crossAxisAlignment": "start",
      "children": [
              {
                      "type": "text",
                      "key": "[*{takeType}]",
                      "fontSize": 30.0,
                      "lineHeight": 1.0,
                      "fontWeight": "8"
              },
              {
                      "type": "img",
                      "width": 100,
                      "height": 100,
                      "url": "url"
              }
      ]
  }
  

  可以看到，各种元素，除了type字段用于表示元素类型，剩余扩展字段的命名和赋值都与 flutter 中对应的基础控件一一对应。

• 数据文件 （可以理解为接单后拿到的数据信息）

  使用布局文件数据占位符的方式进行数据匹配赋值，例如上面的文本块元素：

  {
    "type": "text",
    "key": "[*{takeType}]", //内容占位符
    "fontSize": 30.0,
    "lineHeight": 1.0,
    "fontWeight": "8"
  }
  

  key 标识文本块显示的内容，使用 [*{}] 表示此处需要进行占位数据转换，会去匹配传入的数据json内的对应字段进行替换。效果如下：

  

效果预览

为了更加直观，小编做了一个网页展示整体的设计思想： 点击预览

（由于没有做手机端适配，请使用电脑端打开）

部分截图如下：

已开源发布

通过后管下发布局文件（json），将本地的数据进行插入，获取到 widget，这个 widget 就是我们要的票据样式。

最后将 widget 转换成打印指令，这就是一整套模板动态化设计方案。

该库已开源发布: flutter_json_layout

使用方式简单：

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

点击查看：支持的元素，及其json示例

gitHub： demo及实现代码