如何在 Flutter 中检索没有文本字段的文本输入
Posted
技术标签:
【中文标题】如何在 Flutter 中检索没有文本字段的文本输入【英文标题】:How to retrieve Text Input without Textfield in Flutter 【发布时间】:2021-12-11 22:08:41 【问题描述】:当我扫描条形码时,数字通过设备发送为String
(我猜)。
如果我有一个textfield
,并且它被选中/聚焦,扫描会自动填充数字字符串。
我不想把它放在一个文本字段上,我想把它放在一个类上,处理它以便我可以更新我的购物车。
我尝试使用 KeyboardListener,但它不起作用。
@override
Widget build(BuildContext context)
return KeyboardListener(
focusNode: FocusNode(),
onKeyEvent: (event)
text = event.character.toString();
,
child: Scaffold(
appBar: AppBar(
title: const Text('Retrieve Text Input'),
),
body: Center(
child: Text(text),
)));
我还看到有一个名为TextInput
的类,它是系统文本输入控件的低级接口。
文档说
要开始与系统的文本输入控件交互,请调用attach 以在系统的文本输入控件和TextInputClient 之间建立TextInputConnection。
EditableTextState client = EditableTextState();
TextInputConfiguration configuration = TextInputConfiguration();
final TextInputConnection _textInputConnection =
TextInput.attach(client, configuration);
但我不明白如何使用这个 TextInputConnection 来检索用户输入,因为互联网上没有如何使用这些低级类的示例。
【问题讨论】:
【参考方案1】:这就是我想要隐藏 TextField 并只听用户输入的文本的地方。 使用 Stack 小部件将其他小部件放在 TextField 上,以便它隐藏在其他小部件下。 在使用 TextField 焦点的上部小部件的 Tap 上获取焦点在 TextField 上。 使用 FocusNode getFocus 函数。
您可以尝试禁用用户交互并在 TextField 中应用一些样式。
style: TextStyle(color: Colors.transparent),
autofocus: true,
cursorColor: Colors.transparent,
showCursor: false,
autocorrect: false,
enableSuggestions: false,
maxLines: 1,
enableInteractiveSelection: false,
decoration: InputDecoration(border: InputBorder.none),
使用 TextEditController 可以获取输入的文本。
【讨论】:
你是如何阻止键盘出现的? @ashutosh @YvesBoutellier 我猜那里需要键盘,所以 TextInput 的要求出现在图片中!否则正常的文本将起作用。对于 TextInput showCursor: true, readOnly: true keyboardType: TextInputType.none 将有助于隐藏键盘 @YvesBoutellier 也可以尝试始终禁用焦点TextField(focusNode: AlwaysDisabledFocusNode(),) class AlwaysDisabledFocusNode extends FocusNode @override bool get hasFocus => false;
以上是关于如何在 Flutter 中检索没有文本字段的文本输入的主要内容,如果未能解决你的问题,请参考以下文章
Flutter:如何在没有android底部导航栏的情况下显示屏幕键盘来聚焦文本字段?
如何在 Flutter 的 TextField 中禁用预测文本?