运行此命令:
使用Flutter:
$ flutter pub add flutter_keyboard_visibility
这将在你的包的 pubspec.yaml 中添加这样的一行(并运行一个隐式flutter pub get
):
dependencies:
flutter_keyboard_visibility: ^5.3.0
或者,您的编辑器可能支持flutter pub get
。
对键盘可见性变化做出反应。
关于 Flutter Web 支持的注意事项
Web 支持在这里是一个悬而未决的问题。目前这个库将只返回false
网络上的键盘可见性。
安装
安装包
用法:对键盘可见性更改做出反应
1:在您的Widget
树中使用构建器
使用 . 根据键盘是否可见构建您的 Widget 树KeyboardVisibilityBuilder
。
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
/// In any of your widgets...
@override
Widget build(BuildContext context) {
return KeyboardVisibilityBuilder(
builder: (context, isKeyboardVisible) {
return Text(
'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
);
}
);
2:在您的Widget
树中使用
Widget
根据键盘是否可见,KeyboardVisibilityProvider
在树的顶部附近添加一个来构建树。
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
return KeyboardVisibilityProvider(
child: MyDemoPage(),
);
}
// Within MyDemoPage...
@override
Widget build(BuildContext context) {
final bool isKeyboardVisible = KeyboardVisibilityProvider.isKeyboardVisible(context);
return Text(
'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
);
}
3.直接查询订阅
直接使用类查询和/或订阅键盘可见性 KeyboardVisibilityController
。
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'dart:async';
late StreamSubscription<bool> keyboardSubscription;
@override
void initState() {
super.initState();
var keyboardVisibilityController = KeyboardVisibilityController();
// Query
print('Keyboard visibility direct query: ${keyboardVisibilityController.isVisible}');
// Subscribe
keyboardSubscription = keyboardVisibilityController.onChange.listen((bool visible) {
print('Keyboard visibility update. Is visible: $visible');
});
}
@override
void dispose() {
keyboardSubscription.cancel();
super.dispose();
}
点击关闭键盘
在树顶KeyboardDismissOnTap
附近放置一个。Widget
当用户在当前焦点之外点击时Widget
,Widget
将失去焦点并且键盘将被关闭。
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
return KeyboardDismissOnTap(
child: MyDemoPage(),
);
}
默认情况下KeyboardDismissOnTap
,只会关闭其他交互Widget
s 未捕获的点击,例如按钮。如果您想关闭任何点击的键盘,包括在交互Widget
s 上的点击,请设置dismissOnCapturedTaps
为 true。
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
return KeyboardDismissOnTap(
dismissOnCapturedTaps: true,
child: MyDemoPage(),
);
}
测试
使用模拟测试
@GenerateMocks([KeyboardVisibilityController])
void main() {
testWidgets('It reports true when the keyboard is visible', (WidgetTester tester) async {
// Pretend that the keyboard is visible.
var mockController = MockKeyboardVisibilityController();
when(mockController.onChange)
.thenAnswer((_) => Stream.fromIterable([true]));
when(mockController.isVisible).thenAnswer((_) => true);
// Build a Widget tree and query KeyboardVisibilityProvider
// for the visibility of the keyboard.
bool? isKeyboardVisible;
await tester.pumpWidget(
KeyboardVisibilityProvider(
controller: mockController,
child: Builder(
builder: (BuildContext context) {
isKeyboardVisible =
KeyboardVisibilityProvider.isKeyboardVisible(context);
return SizedBox();
},
),
),
);
// Verify that KeyboardVisibilityProvider reported that the
// keyboard is visible.
expect(isKeyboardVisible, true);
});
}
\