就像在Flutter中,一切都是小部件一样,我决定将SystemChannels.textInput.invokeMethod('TextInput.hide');
和FocusScope.of(context).requestFocus(FocusNode());
方法包装在一个简短的实用程序模块中,其中包含一个小部件和一个mixin。
使用该小部件,您可以使用该小部件包装任何小部件(使用良好的IDE支持时非常方便)KeyboardHider
:
class SimpleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return KeyboardHider(
/* Here comes a widget tree that eventually opens the keyboard,
* but the widget that opened the keyboard doesn't necessarily
* takes care of hiding it, so we wrap everything in a
* KeyboardHider widget */
child: Container(),
);
}
}
使用mixin,您可以在任何交互时触发从任何状态或小部件隐藏键盘:
class SimpleWidget extends StatefulWidget {
@override
_SimpleWidgetState createState() => _SimpleWidgetState();
}
class _SimpleWidgetState extends State<SimpleWidget> with KeyboardHiderMixin {
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
// Hide the keyboard:
hideKeyboard();
// Do other stuff, for example:
// Update the state, make an HTTP request, ...
},
);
}
}
只需创建一个keyboard_hider.dart
文件,即可使用小部件和mixin:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
/// Mixin that enables hiding the keyboard easily upon any interaction or logic
/// from any class.
abstract class KeyboardHiderMixin {
void hideKeyboard({
BuildContext context,
bool hideTextInput = true,
bool requestFocusNode = true,
}) {
if (hideTextInput) {
SystemChannels.textInput.invokeMethod('TextInput.hide');
}
if (context != null && requestFocusNode) {
FocusScope.of(context).requestFocus(FocusNode());
}
}
}
/// A widget that can be used to hide the text input that are opened by text
/// fields automatically on tap.
///
/// Delegates to [KeyboardHiderMixin] for hiding the keyboard on tap.
class KeyboardHider extends StatelessWidget with KeyboardHiderMixin {
final Widget child;
/// Decide whether to use
/// `SystemChannels.textInput.invokeMethod('TextInput.hide');`
/// to hide the keyboard
final bool hideTextInput;
final bool requestFocusNode;
/// One of hideTextInput or requestFocusNode must be true, otherwise using the
/// widget is pointless as it will not even try to hide the keyboard.
const KeyboardHider({
Key key,
@required this.child,
this.hideTextInput = true,
this.requestFocusNode = true,
}) : assert(child != null),
assert(hideTextInput || requestFocusNode),
super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
hideKeyboard(
context: context,
hideTextInput: hideTextInput,
requestFocusNode: requestFocusNode,
);
},
child: child,
);
}
}