flutter:打印模板的动态化方案

引言

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

背景回顾

之前出过一篇文章小票标签打印[跨平台解决方案],基于 Flutter 实现跨平台的打印设计。主要实现以下三点:

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

重点思想:

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

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

dart 复制代码
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。

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

使用布局文件占位符的方式进行数据匹配赋值

示例:

为了更加直观,小编做了一个网页展示整体的设计思想: 网页入口(由于没有做手机端适配,请使用电脑端打开)

部分截图如下:

总结

通过后管下发布局文件(json),将本地的数据进行插入,获取到 widget,这个 widget 就是我们要的票据样式,最后将 widget 转换成打印指令,这就是一整套模板动态化设计方案。

小编已将这套映射库开源发布: flutter_json_layout

使用方式简单:

dart 复制代码
DynamicJsonLayout(
      tempJson: '布局的转义json',
      data: '数据映射的转义json',
)

gitHub 可查看使用示例: github.com/liyufengrex...

支持的元素 可查看:flutter-json-layout.web.app/#/

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

相关推荐
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间3 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭3 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter