flutter - 如何在不显示键盘的情况下聚焦 TextField?
问题描述
我需要专注于 TextField 但不显示键盘。仅当用户点击 TextField时才需要显示键盘。
我尝试了两种方法。
第一次尝试:
这样键盘就会显示出来,并且在屏幕构建后隐藏起来,这不太好看。
生成器:
TextFormField(
controller: barcodeStringController,
focusNode: myFocusNode,
autofocus: true,
textAlign: TextAlign.right,
textInputAction: TextInputAction.done,
textCapitalization: TextCapitalization.characters,
style: TextStyle(fontSize: 20),
maxLines: null,
onTap: () {
SystemChannels.textInput.invokeMethod('TextInput.show');
},
//... Other event listeners to handle submit
),
并且在构建()之外:
void _onAfterBuild(BuildContext context) {
SystemChannels.textInput.invokeMethod('TextInput.hide');
}
第二次尝试:
这样键盘就被隐藏在了一个较低的层次,而且更容易看到。问题是永远不会调用 onTap,因此键盘永远不会显示,onTap 也不会。
生成器:
GestureDetector(
onTap: () {
SystemChannels.textInput.invokeMethod('TextInput.show');
},
child: TapOnlyFocusTextField(
controller: barcodeStringController,
focusNode: myFocusNode, //this is a TapOnlyFocusTextFieldFocusNode
textAlign: TextAlign.right,
textInputAction: TextInputAction.done,
textCapitalization: TextCapitalization.characters,
style: TextStyle(fontSize: 20),
cursorColor: Colors.black,
//... Other event listeners to handle submit
),
),
TapOnlyFocusTextField 类:
class TapOnlyFocusTextField extends EditableText {
TapOnlyFocusTextField({
@required TextEditingController controller,
@required TextStyle style,
@required Color cursorColor,
bool autofocus = false,
Color selectionColor,
FocusNode focusNode,
TextAlign textAlign,
TextInputAction textInputAction,
TextCapitalization textCapitalization,
onSubmitted,
onChanged,
}) : super(
controller: controller,
focusNode: focusNode,
style: style,
cursorColor: cursorColor,
autofocus: autofocus,
selectionColor: selectionColor,
textAlign: textAlign,
textInputAction: textInputAction,
textCapitalization: textCapitalization,
maxLines: null,
onSubmitted: onSubmitted,
backgroundCursorColor: Colors.black,
onChanged: onChanged,
);
@override
EditableTextState createState() {
return TapOnlyFocusTextFieldState();
}
}
class TapOnlyFocusTextFieldState extends EditableTextState {
@override
void requestKeyboard() {
super.requestKeyboard();
//hide keyboard
SystemChannels.textInput.invokeMethod('TextInput.hide');
}
}
TapOnlyFocusTextFieldFocusNode 类:
class TapOnlyFocusTextFieldFocusNode extends FocusNode {
@override
bool consumeKeyboardToken() {
// prevents keyboard from showing on first focus
return false;
}
}
我知道 Flutter Github 中已经有一个未解决的问题,但我需要找到解决方案: https ://github.com/flutter/flutter/issues/16863
解决方案
如此处所示:https ://stackoverflow.com/a/60392327/4693979
但我更喜欢在 initState 中执行此操作:
void initState() {
super.initState();
Future.delayed(
Duration(),
() => SystemChannels.textInput.invokeMethod('TextInput.hide'),
);
}
不要忘记将自动对焦设置为 true。