前言
在往期的分享中，小编介绍了如何通过 flutter 自带的 EditableText 实现扫码枪数据源的获取。大致实现如下：
- 扫码枪本质上是一个外接的输入设备。
- 使用 Stack 结合自己的布局控件 childWidget 将 editableText 封装，控制隐藏。可通过监听 onSubmitted 获取扫码枪的输入内容。
痛点问题
回顾 往期分享 痛点问题 ：
使用 EditableText 的过程中遇到了系统键盘弹出的问题。我们通过 Edit 的焦点来获取扫码枪的输入。但 EditableText 一旦获取了焦点，内部会调用原生层唤起键盘。
扫码枪触发焦点后，系统键盘自动弹起。这样的失败交互困扰了小编很久。
- 往期分享中的临时方案 之前的处理方式是通过定制化源码的方式，将指定版本内的
TextInput.show手动注释掉。
PS：这是一个笨方法，只能解燃眉之急，输入框和文本，一直都是官方每个版本改动的重点。指定版本不是长久的方案。
如何在不改动源码的方式下，动态控制焦点是否触发键盘弹出？
1.系统键盘弹出的原因
实际上，系统键盘是否弹出，完全是因为 SystemChannels.textInput.invokeMethod<void>('TextInput.show') 的调用，但是我们不可能去每个调用该方法地方去做处理，那么这个方法执行后续，我们有办法拦截吗？ 答案当然是有的。
2. 如何拦截 methodChannel
Flutter 的 Framework 层发送信息 TextInput.show 到 Flutter 引擎是通过 MethodChannel, 而我们可以通过重载 WidgetsFlutterBinding 的 createBinaryMessenger 方法来处理Flutter 的 Framework 层通过 MethodChannel 发送的信息。
具体代码如下：
使用 mixin 对 WidgetsFlutterBinding 进行方法重载
mixin TextInputBindingMixin on WidgetsFlutterBinding {
@override
BinaryMessenger createBinaryMessenger() {
return TextInputBinaryMessenger(super.createBinaryMessenger());
}
}
在 main 方法中初始化这个 binding
class TextInputBinding extends WidgetsFlutterBinding with TextInputBindingMixin {}
void main() {
TextInputBinding();
runApp(const MyApp());
}
自定义 TextInputBinaryMessager 对 methodChannel 进行自定义拦截操作
class TextInputBinaryMessenger extends BinaryMessenger {
TextInputBinaryMessenger(this.origin);
final BinaryMessenger origin;
// Flutter 的 Framework 层发送信息到 Flutter 引擎，会走这个方法
@override
Future<ByteData?>? send(
String channel,
ByteData? message,
) {
//TODO 拦截处理
}
// Flutter 引擎 发送信息到 Flutter 的 Framework 层的回调，无需处理
@override
void setMessageHandler(
String channel,
MessageHandler? handler,
) {
... 省略
}
//无需处理
@override
Future<void> handlePlatformMessage(
String channel,
ByteData? data,
PlatformMessageResponseCallback? callback,
) {
... 省略
}
}
send 方法：flutter 的 framework 层发送信息到 flutter 引擎，会走这个方法，这也是我们需要的处理的方法。
3. 拦截思路
可以根据我们的需求处理 send 方法了。当 channel 为 SystemChannels.textInput 的时候，根据方法名字来拦截 TextInput.show。
再定义一个特别的 FocusNode，并且定义好一个属性用于判断(也有那种需要随时改变是否需要拦截信息的需求)。例如 TextInputFocusNode：
import 'package:flutter/material.dart';
class TextInputFocusNode extends FocusNode {
bool ignoreSystemKeyboardShow = true;
}
根据思路，我们的拦截方法实现如下：
@override
Future<ByteData?>? send(
String channel,
ByteData? message,
) {
if (channel == SystemChannels.textInput.name) {
final methodCall = SystemChannels.textInput.codec.decodeMethodCall(
message,
);
switch (methodCall.method) {
case 'TextInput.show':
final FocusNode? focus = FocusManager.instance.primaryFocus;
if (focus != null &&
focus is TextInputFocusNode &&
focus.ignoreSystemKeyboardShow) {
return Future.value(
SystemChannels.textInput.codec.encodeSuccessEnvelope(null),
);
}
break;
default:
break;
}
}
return origin.send(channel, message);
}
扫码库更新
小编已将本次的方案调整重新发布上传，使用方式如下：
- 在pubspec.yaml文件中进行引用：
dependencies:
scan_gun: ^2.0.0
- 提供
ScanMonitorWidget作为父节点，嵌套使用：
ScanMonitorWidget({
Key? key,
required ChildBuilder childBuilder,
TextInputFocusNode? scanNode,
FocusNode? textFiledNode,
required void Function(String) onSubmit,
})
- 在 main 方法中初始化 TextInputBinding
void main() {
TextInputBinding();
runApp(const MyApp());
}
参数说明:
- childBuilder :
typedef ChildBuilder = Widget Function(BuildContext context)，使用者自己UI作为子节点 - scanNode:
- 非必传，如果传，可通过
scanNode监听获取当前扫码可用状态，hasFocus时为可用 - 也可通过
scanNoderequestFocus 方法，强制扫码获取焦点，保证扫码能力
- textFiledNode:
提供外部存在输入框键盘输入与扫码输入同时存在的场景。内部做了焦点切换能力，保证输入框焦点取消后，能马上切换成扫码枪的焦点
以上就是flutter优雅实现扫码枪获取数据源示例详解的详细内容，更多关于flutter扫码枪获取数据源的资料请关注编程网其它相关文章！
