在 Flutter 中将焦点从一个文本字段更改为下一个文本字段

Posted 2023-02-23

【中文标题】在 Flutter 中将焦点从一个文本字段更改为下一个文本字段

【英文标题】：Changing focus from one text field to the next in Flutter

【发布时间】：2018-08-30 20:19:40

【问题描述】：

我有两个 textFormField 小部件。用户完成第一个文本字段后，我想关注下一个 textField。有没有办法在 Flutter 中做到这一点？目前，完成按钮只是关闭键盘。我猜focusNode 类可能是这个问题的答案，但不确定它是如何工作的，有没有人有任何关于 focusNode 类的好例子？提前致谢。

【问题讨论】：

欢迎来到 ***。请通过tour 环顾四周，通读HELP center，然后阅读How to 、What types of questions should I avoid asking? 并提供MCVE : Minimal, Complete, and Verifiable Example。如果周围的人可以轻松阅读并理解您的意思或问题所在，他们将更愿意提供帮助:)

【参考方案1】：

我就是这样做的：

  var _focusNodes = List.generate(6, (index) => FocusNode()));

在 TextFormField 中：

  TextFormField(
    focusNode: _focusNodes[i],
    maxLines: 1,
    textInputAction: TextInputAction.next,
    onChanged: (text) 
      if (i < _controllers.length) 
        if (text.isEmpty)
          _focusNodes[i - 1].requestFocus();
        else
          _focusNodes[i + 1].requestFocus();
      
    ,
  ),

【参考方案2】：

截图：

---

无需使用FocusNode

@override
Widget build(BuildContext context) 
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: [
        TextField(
          decoration: InputDecoration(hintText: 'First Name'),
          textInputAction: TextInputAction.next,
          onEditingComplete: () => FocusScope.of(context).nextFocus(),
        ),
        TextField(
          decoration: InputDecoration(hintText: 'Last Name'),
          textInputAction: TextInputAction.done,
          onSubmitted: (_) => FocusScope.of(context).unfocus(),
        ),
      ],
    ),
  );

【讨论】：

它对我很有效，当在文本输入屏幕上点击擦除/删除时，有什么方法可以聚焦前一个

@A.K.J.94 您可以使用onChanged 属性并在其中处理您的逻辑。

【参考方案3】：

在 android 中也有类似的方法。

添加

textInputAction

将参数添加到TextFormField Widget，然后将属性添加为;

 TextInputAction.next

【讨论】：

这不只是改变弹出式键盘吗？

这确实有效，但前提是文本字段没有带有 onPressed 集的后缀小部件

@Ammar Mohammad 你找到解决方案了吗..？

【参考方案4】：

是的，FocusNode 和来自TextFormField 的onFieldSubmitted 可能是要走的路。

FocusScope.of(context).requestFocus(focusNode);

这是一个可能有帮助的例子：

    FocusNode textSecondFocusNode = new FocusNode();

    TextFormField textFirst = new TextFormField(
      onFieldSubmitted: (String value) 
        FocusScope.of(context).requestFocus(textSecondFocusNode);
      ,
    );

    TextFormField textSecond = new TextFormField(
      focusNode: textSecondFocusNode,
    );

    // render textFirst and textSecond where you want

您可能还想从按钮而不是 onFieldSubmitted 触发 FocusScope.of()，但希望上面的示例为您提供足够的上下文来为您的用例构建合适的解决方案。

【讨论】：

在这种情况下如何更改键盘上的按钮？像其他应用一样从复选标记到箭头

@busuu 据我了解，这不会改变键盘上的按钮。它只会改变键盘上enter 键的行为，以便将焦点更改到下一个字段。这是我们目前得到的最好的。

@busuu 要将键盘上的复选按钮更改为箭头，请在 TextFormField 上设置以下内容。 textInputAction: TextInputAction.next

如果您需要向键盘添加更多操作，请查看此包：pub.dartlang.org/packages/keyboard_actions

对 OTP 身份验证很有用。