Flutter图层管理插件easylayer的使用
Flutter图层管理插件easylayer的使用
easylayer
该插件是一个用于封装Gertec产品（如SK210）所使用的Easylayer API的库。通过此插件，开发者可以直接在Dart代码中调用Java编写的API。
关于
该包的目标是封装Easylayer API，以便可以直接在Dart代码中使用。尽管存在语言差异（例如Dart不支持方法重载），但尽可能保持方法签名的一致性。
前提条件
为了使用此插件，你需要下载Easylayer SDK，并将其作为项目依赖项添加。具体步骤如下：
- 下载SDK文件，例如
EasyLayer-SK210-v2.1.7-release.aar。 - 将下载的SDK文件添加到项目的
android/app/libs/目录中。 - 在
android/app/build.gradle文件中添加以下依赖项：dependencies { implementation files('libs/EasyLayer-SK210-v2.1.7-release.aar') }
免责声明
此插件与Gertec公司没有任何隶属关系。它是由独立开发者开发的，旨在简化与公司软件的集成。所有提及的品牌和商标均属于其各自的所有者。
完整示例Demo
下面是一个完整的示例代码，展示了如何使用 easylayer 插件来执行各种打印任务：
import 'package:easylayer/easylayer.dart';
import 'package:flutter/material.dart' hide Size, Alignment;
import 'package:flutter/services.dart' hide Size;
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const Application());
}
class Application extends StatefulWidget {
const Application({super.key});
[@override](/user/override)
State<Application> createState() => _ApplicationState();
}
class _ApplicationState extends State<Application> {
final printer = Easylayer.printer;
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'EasyLayer',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF027DFD),
brightness: Brightness.light,
primary: const Color(0xFF027DFD),
),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: ListView(
children: [
Button(
iconData: Icons.receipt_outlined,
title: 'Imprimir texto (printText)',
body: 'Imprime uma mensagem de texto pré-definida.',
onTap: () async {
await printer.printText(
text: 'Esta é uma mensagem de texto pré-definida!',
);
},
),
Button(
iconData: Icons.image_outlined,
title: 'Imprimir imagem (printImage)',
body: 'Imprime uma imagem pré-definida.',
onTap: () async {
final byteData = await rootBundle.load(
'assets/images/nico.jpg',
);
final image = byteData.buffer.asUint8List();
await printer.printImage(
image: image,
);
},
),
Button(
iconData: Icons.html_outlined,
title: 'Imprimir HTML (printHtml)',
body: 'Imprime um conteúdo HTML pré-definido.',
onTap: () async {
const htmlCode = '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Test Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Test Page</h1>
<label for="inputText">Enter something:</label>
<input type="text" id="inputText" placeholder="Type here...">
<button onclick="displayText()">Submit</button>
<div id="output"></div>
<script>
function displayText() {
var input = document.getElementById("inputText").value;
document.getElementById("output").innerText = input ? "You entered: " + input : "Please enter something!";
}
</script>
</body>
</html>
''';
await printer.printHtml(
htmlCode: htmlCode,
);
},
),
Button(
iconData: Icons.table_rows_outlined,
title: 'Imprimir tabela (printTable)',
body: 'Imprime uma tabela pré-definida.',
onTap: () async {
await printer.printTable(
header: [
'Show',
'Airing Period',
'IMDb Rating',
'Rotten Tomatoes',
'Letterboxd'
],
rows: [
[
'Breaking Bad',
'2008-2013',
'9.5 IMDb',
'96% RT',
'4.6 LB'
],
[
'The Sopranos',
'1999-2007',
'9.2 IMDb',
'92% RT',
'4.5 LB'
],
[
'Better Call Saul',
'2015-2022',
'8.9 IMDb',
'98% RT',
'4.4 LB'
],
[
'Stranger Things',
'2016-',
'8.7 IMDb',
'91% RT',
'4.3 LB'
],
],
);
},
),
Button(
iconData: Icons.move_down_outlined,
title: 'Rolar o papel de impressão (scrollPaper)',
body: 'Rola em uma linha o papel de impressão.',
onTap: () async {
await printer.scrollPaper(
lines: 1,
);
},
),
Button(
iconData: Icons.cut_outlined,
title: 'Cortar o papel de impressão',
body: 'Realiza o corte do papel de impressão.',
onTap: () async {
await printer.cutPaper(
cutType: CutType.PAPER_FULL_CUT,
);
},
),
Builder(builder: (context) {
return Button(
iconData: Icons.settings_outlined,
title: 'Ver status',
body: 'Exibe o status atual da impressora',
onTap: () async {
final status = await printer.getStatus();
if (context.mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
status.toString(),
),
),
);
}
},
);
}),
Button(
iconData: Icons.receipt_long_outlined,
title: 'Imprimir exemplo',
body: 'Imprime um extenso exemplo das funcionalidades da biblioteca/impressora.',
onTap: () async {
await printer.printText(
text: 'Este é um texto simples.',
);
await printer.printText(
offset: 20,
textFormat: const TextFormat(),
text: 'Este é um texto simples com offset de 20.',
);
await printer.printText(
text: 'Este é um texto em negrito.',
textFormat: const TextFormat(
bold: true,
),
);
await printer.printText(
text: 'Este é um texto em itálico.',
textFormat: const TextFormat(
italic: true,
),
);
await printer.printText(
text: 'Este é um texto com underline.',
textFormat: const TextFormat(
underscore: true,
),
);
await printer.printText(
text: 'Este é um texto com em negrito e itálico com underline.',
textFormat: const TextFormat(
bold: true,
italic: true,
underscore: true,
),
);
await printer.printText(
text: 'Este é um texto pequeno alinhado à esquerda.',
textFormat: const TextFormat(
fontSize: 16,
alignment: Alignment.LEFT,
),
);
await printer.printText(
text: 'Este é um texto médio alinhado ao centro.',
textFormat: const TextFormat(
fontSize: 20,
alignment: Alignment.CENTER,
),
);
await printer.printText(
text: 'Este é um texto grande alinhado à direita.',
textFormat: const TextFormat(
fontSize: 24,
alignment: Alignment.RIGHT,
),
);
//
await printer.scrollPaper(lines: 3);
//
final byteData = await rootBundle.load(
'assets/images/nico.jpg',
);
final image = byteData.buffer.asUint8List();
await printer.printImage(
image: image,
);
await printer.printImage(
printConfig: const PrintConfig(
width: 200,
height: 200,
),
image: image,
);
await printer.printImage(
offset: 50,
printConfig: const PrintConfig(
width: 200,
height: 200,
),
image: image,
);
//
await printer.scrollPaper(lines: 3);
//
const htmlCode = '''
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a test page.</p>
</body>
</html>''';
await printer.printHtml(
htmlCode: htmlCode,
);
await printer.printHtml(
printConfig: const PrintConfig(
width: 200,
height: 200,
),
hasAssetsLoading: false,
htmlCode: htmlCode,
);
await printer.printHtml(
offset: 50,
printConfig: const PrintConfig(
width: 200,
height: 200,
),
hasAssetsLoading: false,
htmlCode: htmlCode,
);
//
await printer.scrollPaper(lines: 3);
//
final header = [
'Show',
'Airing Period',
'IMDb Rating',
'Rotten Tomatoes',
'Letterboxd'
];
final rows = [
[
'Breaking Bad',
'2008-2013',
'9.5 IMDb',
'96% RT',
'4.6 LB'
],
[
'The Sopranos',
'1999-2007',
'9.2 IMDb',
'92% RT',
'4.5 LB'
],
[
'Better Call Saul',
'2015-2022',
'8.9 IMDb',
'98% RT',
'4.4 LB'
],
[
'Stranger Things',
'2016-',
'8.7 IMDb',
'91% RT',
'4.3 LB'
],
];
await printer.printTable(
rows: rows,
);
await printer.printTable(
header: header,
rows: rows,
);
await printer.printTable(
tableFormat: const TableFormat(
headerAlignment: Alignment.CENTER,
rowAlignment: Alignment.RIGHT,
fontSize: 8,
),
header: header,
rows: rows,
);
//
await printer.scrollPaper(lines: 3);
const lipsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
await printer.printText(
text: 'QR_CODE',
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.QR_CODE,
),
data: lipsum,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.QR_CODE,
size: Size.SMALL,
),
data: lipsum,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.QR_CODE,
size: Size.HALF_PAPER,
),
data: lipsum,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.QR_CODE,
size: Size.FULL_PAPER,
),
data: lipsum,
);
//
await printer.scrollPaper(lines: 1);
//
const ean8 = '12345678';
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_8,
),
data: ean8,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_8,
size: Size.SMALL,
),
data: ean8,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_8,
size: Size.HALF_PAPER,
),
data: ean8,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_8,
size: Size.FULL_PAPER,
),
data: ean8,
);
//
await printer.scrollPaper(lines: 1);
//
const ean13 = '7891000315507';
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_13,
),
data: ean13,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_13,
size: Size.SMALL,
),
data: ean13,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_13,
size: Size.HALF_PAPER,
),
data: ean13,
);
await printer.printBarcode(
barcodeFormat: const BarcodeFormat(
barcodeType: BarcodeType.EAN_13,
size: Size.FULL_PAPER,
),
data: ean13,
);
//
await printer.scrollPaper(lines: 1);
await printer.cutPaper(cutType: CutType.PAPER_FULL_CUT);
},
),
],
),
),
),
);
}
}
class Button extends StatelessWidget {
final IconData? iconData;
final String title;
final String? body;
final void Function()? onTap;
final double spacer;
const Button({
super.key,
this.iconData,
required this.title,
this.body,
this.onTap,
this.spacer = 8.0,
});
[@override](/user/override)
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Padding(
padding: EdgeInsets.all(spacer),
child: Row(
children: [
if (iconData != null) ...[
Icon(
iconData,
),
SizedBox(width: spacer),
],
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
title,
style: Theme.of(context).textTheme.titleMedium,
),
if (body is String) ...[
Text(
body!,
style: Theme.of(context).textTheme.bodyMedium,
),
],
],
),
)
],
),
),
);
}
}
更多关于Flutter图层管理插件easylayer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter图层管理插件easylayer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
EasyLayer 是一个用于 Flutter 的图层管理插件，它可以帮助你在应用中轻松地管理和显示多个图层。通过 EasyLayer，你可以实现弹出层、对话框、加载层等效果，并且可以方便地控制这些图层的显示和隐藏。
安装
首先，你需要在 pubspec.yaml 文件中添加 easylayer 依赖：
dependencies:
flutter:
sdk: flutter
easylayer: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
基本使用
1. 初始化 EasyLayer
在使用 EasyLayer 之前，你需要在应用的顶层 Widget 中初始化它。通常，你可以将 EasyLayer 包裹在 MaterialApp 或 CupertinoApp 外。
import 'package:flutter/material.dart';
import 'package:easylayer/easylayer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return EasyLayer(
child: MaterialApp(
title: 'EasyLayer Demo',
home: HomePage(),
),
);
}
}
2. 显示图层
你可以使用 EasyLayer.of(context).showLayer() 方法来显示一个图层。这个方法接受一个 Widget 参数，该 Widget 将作为图层内容显示。
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('EasyLayer Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
EasyLayer.of(context).showLayer(
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is a layer'),
ElevatedButton(
onPressed: () {
EasyLayer.of(context).hideLayer();
},
child: Text('Close'),
),
],
),
),
),
);
},
child: Text('Show Layer'),
),
),
);
}
}
3. 隐藏图层
你可以使用 EasyLayer.of(context).hideLayer() 方法来隐藏当前显示的图层。
ElevatedButton(
onPressed: () {
EasyLayer.of(context).hideLayer();
},
child: Text('Close'),
);
高级用法
EasyLayer 还支持一些高级功能，比如动画、背景遮罩、图层堆叠等。你可以通过传递不同的参数来定制这些功能。
1. 动画效果
你可以通过 animationDuration 和 animationCurve 参数来设置图层的显示和隐藏动画。
EasyLayer.of(context).showLayer(
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is a layer'),
ElevatedButton(
onPressed: () {
EasyLayer.of(context).hideLayer();
},
child: Text('Close'),
),
],
),
),
),
animationDuration: Duration(milliseconds: 300),
animationCurve: Curves.easeInOut,
);
2. 背景遮罩
你可以通过 background 参数来设置图层的背景遮罩。
EasyLayer.of(context).showLayer(
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('This is a layer'),
ElevatedButton(
onPressed: () {
EasyLayer.of(context).hideLayer();
},
child: Text('Close'),
),
],
),
),
),
background: Colors.black.withOpacity(0.5),
);
3. 图层堆叠
EasyLayer 支持多个图层的堆叠显示。你可以通过多次调用 showLayer 方法来显示多个图层。
EasyLayer.of(context).showLayer(
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Layer 1'),
ElevatedButton(
onPressed: () {
EasyLayer.of(context).showLayer(
child: Center(
child: Container(
width: 150,
height: 150,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Layer 2'),
ElevatedButton(
onPressed: () {
EasyLayer.of(context).hideLayer();
},
child: Text('Close'),
),
],
),
),
),
);
},
child: Text('Show Layer 2'),
),
],
),
),
),
);