Flutter键盘事件监听插件keyboard_event的使用
Flutter键盘事件监听插件keyboard_event的使用
插件介绍
keyboard_event 是一个用于在Windows平台上捕获所有键盘事件的Flutter插件，即使你在使用其他程序时也能监听到键盘输入。该插件使用了Windows的 SetWindowsHookEx API 来实现低级别的键盘事件监听。
使用步骤
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 keyboard_event 依赖：
dependencies:
flutter:
sdk: flutter
keyboard_event: ^latest_version
替换 ^latest_version 为最新的版本号。
2. 初始化插件
在你的应用启动时，初始化 keyboard_event 插件。你可以在 main.dart 文件中进行如下操作：
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:keyboard_event/keyboard_event.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
final List<String> _err = [];
final List<String> _event = [];
late KeyboardEvent keyboardEvent;
int eventNum = 0;
bool listenIsOn = false;
[@override](/user/override)
void initState() {
super.initState();
initPlatformState();
keyboardEvent = KeyboardEvent();
}
// 异步初始化平台状态
Future<void> initPlatformState() async {
String? platformVersion;
List<String> err = [];
try {
// 获取平台版本
platformVersion = await KeyboardEvent.platformVersion;
} on PlatformException {
err.add('Failed to get platform version.');
}
try {
// 初始化键盘事件监听
await KeyboardEvent.init();
} on PlatformException {
err.add('Failed to get virtual-key map.');
}
if (!mounted) return;
setState(() {
if (platformVersion != null) _platformVersion = platformVersion;
if (err.isNotEmpty) _err.addAll(err);
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Row(
children: [
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('运行于: $_platformVersion'),
Row(
children: [
const Text('点击按钮切换键盘监听: '),
Switch(
value: listenIsOn,
onChanged: (bool newValue) {
setState(() {
listenIsOn = newValue;
if (listenIsOn == true) {
// 开始监听键盘事件
keyboardEvent.startListening((keyEvent) {
setState(() {
eventNum++;
if (keyEvent.vkName == 'ENTER') {
_event.last += '\n';
} else if (keyEvent.vkName == 'BACK') {
_event.removeLast();
}
if (keyEvent.vkName == 'F5') {
_event.clear();
} else {
_event.add(keyEvent.toString());
}
if (_event.length > 20) {
_event.removeAt(0);
}
debugPrint(keyEvent.toString());
});
});
} else {
// 停止监听键盘事件
keyboardEvent.cancelListening();
}
});
},
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: const BoxConstraints.tightFor(width: 260),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("监听到的键盘事件${_event.length}: ${keyboardEvent.state.toString()}"),
ElevatedButton.icon(
onPressed: () {
setState(() => _event.clear());
},
icon: const Icon(Icons.delete),
label: const Text('Clear'),
),
Text(
_event.join('\n'),
overflow: TextOverflow.ellipsis,
maxLines: 20,
),
],
),
),
if (KeyboardEvent.virtualKeyString2CodeMap != null)
Table(
border: TableBorder.all(
color: Colors.black38,
),
columnWidths: const {
0: FixedColumnWidth(150),
1: FixedColumnWidth(40),
},
children: [
for (var item in KeyboardEvent.virtualKeyString2CodeMap!.entries)
TableRow(
key: ValueKey(item.key),
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(item.key),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(item.value.toString()),
),
],
)
],
),
if (KeyboardEvent.virtualKeyCode2StringMap != null)
const SizedBox(
width: 20,
),
if (KeyboardEvent.virtualKeyCode2StringMap != null)
Table(
border: TableBorder.all(
color: Colors.black38,
),
columnWidths: const {
0: FixedColumnWidth(40),
1: FixedColumnWidth(150),
},
children: [
for (var item in KeyboardEvent.virtualKeyCode2StringMap!.keys.toList()..sort())
TableRow(
key: ValueKey(item),
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(item.toString()),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(
KeyboardEvent.virtualKeyCode2StringMap![item]!.join(', \n').toString()),
),
],
)
],
),
],
),
const SizedBox(
height: 20,
),
],
),
],
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
initPlatformState();
},
),
),
);
}
}
更多关于Flutter键盘事件监听插件keyboard_event的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter键盘事件监听插件keyboard_event的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用keyboard_event插件来监听键盘事件的示例代码。这个插件允许你检测键盘的显示和隐藏事件，这在处理屏幕布局调整时非常有用。
首先，确保你的Flutter项目已经添加了keyboard_event插件。如果还没有添加，可以在pubspec.yaml文件中添加以下依赖：
dependencies:
flutter:
sdk: flutter
keyboard_event: ^3.0.0 # 请检查最新版本号
然后运行flutter pub get来安装插件。
接下来，你可以在你的Flutter应用中使用KeyboardEvent来监听键盘事件。以下是一个完整的示例，展示了如何监听键盘的显示和隐藏事件：
import 'package:flutter/material.dart';
import 'package:keyboard_event/keyboard_event.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Keyboard Event Listener'),
),
body: KeyboardEventListener(
onChange: (bool isVisible) {
print('Keyboard is ${isVisible ? 'visible' : 'hidden'}');
// 在这里添加你的逻辑，比如调整布局
},
child: Center(
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type something',
),
),
),
),
),
);
}
}
在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个TextField。我们使用KeyboardEventListener组件来包裹TextField，并通过onChange回调来监听键盘的显示和隐藏事件。当键盘显示或隐藏时，onChange回调会被触发，并打印出键盘的状态。
KeyboardEventListener的onChange回调接受一个布尔值参数isVisible，该参数为true时表示键盘可见，为false时表示键盘隐藏。你可以在这个回调中添加你自己的逻辑，比如根据键盘的显示状态调整布局或执行其他操作。
这个插件非常适合用于需要动态调整UI布局以适应软键盘显示和隐藏的场景，例如聊天应用或表单输入页面。
