如何在 Flutter 中检索没有 Textfield 的文本输入

How to retrieve Text Input without Textfield in Flutter

提问人:Yves Boutellier 提问时间:10/26/2021 最后编辑:RaBaKa 78Yves Boutellier 更新时间:10/26/2021 访问量:1531

问:

当我扫描条形码时,数字会通过设备发送(我猜)。 如果我有一个 ,并且它被选中/聚焦,扫描会自动填充数字字符串。 我不想把它放在 textField 上,我想在类上捕获它,处理它以便我可以更新我的购物车。Stringtextfield

我尝试使用 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 来检索用户输入,因为互联网上没有如何使用这些低级类的示例。

Android Flutter IO 条码扫描 文本输入

评论


答:

2赞 ashutosh 10/26/2021 #1

这就是我所做的,我想隐藏 TextField 并只听用户输入的文本。 使用 Stack widget 将其他 widget 放在 TextField 上,以便将其隐藏在其他 widget 下。 在使用 TextField 焦点点击上部小部件时,获取 Focus on 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,您可以获取输入的文本。

评论

0赞 Yves Boutellier 10/27/2021
你是如何防止键盘出现的?@ashutosh
0赞 ashutosh 10/27/2021
@YvesBoutellier我想那里需要键盘,所以需要 TextInput 来图片!否则正常文本将起作用。对于 TextInput,showCursor: true, readOnly: true keyboardType: TextInputType.none 将有助于隐藏键盘
0赞 ashutosh 10/27/2021
@YvesBoutellier也可以尝试始终禁用焦点TextField(focusNode: AlwaysDisabledFocusNode(),) class AlwaysDisabledFocusNode extends FocusNode { @override bool get hasFocus => false; }