引言
近期有朋友私信试读，希望能出一篇關于打印模版動態(tài)化的設計方案酷誓。由于最近也比較忙瘤礁，小編簡單的整理了一下設計框架谓娃。
背景回顧
之前出過一篇文章小票標簽打印[跨平臺解決方案]坎背，基于 Flutter 實現(xiàn)跨平臺的打印設計替劈。主要實現(xiàn)以下三點：
- 票據樣式: 拒絕硬編碼，直接使用 flutter-widget 進行樣式開發(fā)得滤，更加直觀靈活
- 打印指令集: 不嵌入廠商的打印SDK陨献，適配一碼多用，無后續(xù)接入開發(fā)消耗
- 傳輸方式: 指令集傳輸方式可擴展懂更，底層代碼無需變動
重點思想：
我們改變了之前使用硬編碼的方式進行票據打印湿故，將票據的樣式改用 Flutter - widget 布局實現(xiàn)，最后使用光柵位圖的統(tǒng)一標準進行指令集中轉膜蛔，得到我們要的打印指令的字節(jié)數據坛猪。
我們可以這樣寫票據樣式：(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
}
最后打印出來的票據樣例如下：
動態(tài)化模板
既然我們是使用的 widget 繪制票據內容墅茉，只要我們解決了 flutter-widget 層的動態(tài)化設計，我們的打印模板就實現(xiàn)了動態(tài)化呜呐。
模板結構：
小編將動態(tài)模板設計成兩個部分：
- 布局文件 （對于后管就斤，需要動態(tài)下發(fā)的就是布局文件（固定格式的 json 文件））
我們將常用的布局元素例如：文本塊、行蘑辑、列洋机、大小容器、權重控件洋魂、Padding 等進行
映射封裝绷旗，使其可以接受 json 進行轉換成 widget。
- 數據文件 （可以理解為接單后拿到的數據信息）
使用布局文件
占位符的方式進行數據匹配賦值
示例：
為了更加直觀副砍，小編做了一個網頁展示整體的設計思想：
網頁入口（由于沒有做手機端適配衔肢，請使用電腦端打開）
部分截圖如下：
總結
通過后管下發(fā)布局文件（json），將本地的數據進行插入豁翎，獲取到 widget角骤，這個 widget 就是我們要的票據樣式，最后將 widget 轉換成打印指令心剥，這就是一整套模板動態(tài)化設計方案邦尊。
小編已將這套映射庫開源發(fā)布: flutter_json_layout
使用方式簡單：
DynamicJsonLayout(
tempJson: '布局的轉義json',
data: '數據映射的轉義json',
)
gitHub 可查看使用示例: https://github.com/liyufengrex/flutter_json_layout
支持的元素 可查看：https://flutter-json-layout.web.app/#/
方案細節(jié)一直在優(yōu)化，歡迎大家一起交流進步优烧。
