引言
近期有朋友私信，希望能出一篇关于打印模版动态化的设计方案。由于最近也比较忙，小编简单的整理了一下设计框架。
背景回顾
之前出过一篇文章小票标签打印[跨平台解决方案]，基于 Flutter 实现跨平台的打印设计。主要实现以下三点：
- 票据样式: 拒绝硬编码，直接使用 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
}
最后打印出来的票据样例如下：
image.png
动态化模板
既然我们是使用的 widget 绘制票据内容，只要我们解决了 flutter-widget 层的动态化设计，我们的打印模板就实现了动态化。
模板结构：
小编将动态模板设计成两个部分：
- 布局文件 （对于后管，需要动态下发的就是布局文件（固定格式的 json 文件））
我们将常用的布局元素例如：文本块、行、列、大小容器、权重控件、Padding 等进行
映射封装，使其可以接受 json 进行转换成 widget。
- 数据文件 （可以理解为接单后拿到的数据信息）
使用布局文件
占位符的方式进行数据匹配赋值
示例：
image.png
为了更加直观，小编做了一个网页展示整体的设计思想：
网页入口（由于没有做手机端适配，请使用电脑端打开）
部分截图如下：
image.png
image.png
总结
通过后管下发布局文件（json），将本地的数据进行插入，获取到 widget，这个 widget 就是我们要的票据样式，最后将 widget 转换成打印指令，这就是一整套模板动态化设计方案。
小编已将这套映射库开源发布: flutter_json_layout
使用方式简单：
DynamicJsonLayout(
tempJson: '布局的转义json',
data: '数据映射的转义json',
)
gitHub 可查看使用示例: https://github.com/liyufengrex/flutter_json_layout
支持的元素 可查看：https://flutter-json-layout.web.app/#/
方案细节一直在优化，欢迎大家一起交流进步。
网友评论