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/#/

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

相关推荐
小蜜蜂嗡嗡9 小时前
flutter封装vlcplayer的控制器
前端·javascript·flutter
你听得到1119 小时前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件1 天前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风1 天前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem1 天前
基于Flutter的web登录设计
前端·flutter
coder_pig1 天前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘1 天前
Android 16开发者全解读
android·flutter·客户端
Jalor1 天前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao2 天前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主2 天前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware