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

引言

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

背景回顾

之前出过一篇文章小票标签打印[跨平台解决方案]，基于 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/#/

方案细节一直在优化，欢迎大家一起交流进步。