如何在颤动中将焦点转移到另一个文本表单字段

Posted 2023-03-07

【中文标题】如何在颤动中将焦点转移到另一个文本表单字段

【英文标题】：How to shift focus to another textformfield in flutter

【发布时间】：2021-07-05 06:25:56

【问题描述】：

我将两个 texFormField 用于两个不同的页面电子邮件和密码现在我想使用 FocusNode 中的回调函数将焦点从电子邮件转移到密码。

我尝试了 FocusScope.of(context).requestFocus(nextFocusNode)，但它不起作用。

//email.dart (This page containe only email textfield)
    TextFormField(
            textInputAction: TextInputAction.next,
            focusNode: emailNode,
            onFieldSubmitted: (emailNode) 
              setState(() 
                FocusScop.of(context).requestFocus(passwordNode);
              );
            ,
            controller: _email.text,
          ),

//password.dart(This page contain onlt password)
    TextFormField(
            textInputAction: TextInputAction.next,
            focusNode: passwordNode,
            onFieldSubmitted: (passwordNode) 
              setState(() 
                FocusScop.of(context).requestFocus(passwordNode);
              );
            ,
            controller: _email.text,
          ),

//两个文件不同。

【参考方案1】：

有几个错误，不确定是不是错别字。 TextEditingController 未正确分配，并且可能也是提交密码字段时的逻辑。 这样的事情对我有用：

class EmailField extends StatefulWidget 
  final FocusNode thisNode;

  const EmailField(Key key, this.thisNode) : super(key: key);

  @override
  _EmailFieldState createState() => _EmailFieldState();


class _EmailFieldState extends State<EmailField> 
  TextEditingController _email = TextEditingController();

  @override
  Widget build(BuildContext context) 
    return TextFormField(
      textInputAction: TextInputAction.next,
      focusNode: widget.thisNode,
      onFieldSubmitted: (emailNode) 
        setState(() 
          FocusScope.of(context).requestFocus();
        );
      ,
      controller: _email,
    );
  


class PasswordField extends StatefulWidget 
  final FocusNode thisNode;
  const PasswordField(Key key, this.thisNode) : super(key: key);

  @override
  _PasswordFieldState createState() => _PasswordFieldState();


class _PasswordFieldState extends State<PasswordField> 
  TextEditingController _password = TextEditingController();

  @override
  Widget build(BuildContext context) 
    return TextFormField(
      textInputAction: TextInputAction.done,
      focusNode: widget.thisNode,
      onFieldSubmitted: (passwordNode) 
        setState(() 
          FocusScope.of(context).unfocus();
        );
      ,
      controller: _password,
    );
  

然后你可以像这样使用它：

// create this inside the state
FocusNode _emailNode = FocusNode();
FocusNode _passwordNode = FocusNode();

// use this in your layout e.g. Form -> Column
EmailField(thisNode: _emailNode),
PasswordField(thisNode: _passwordNode),

【讨论】：

在单个页面上，此代码运行良好，但我在不同页面上为两者编写了代码，因为我将该小部件作为我的应用程序中的通用小部件。所以，我正在寻找不同的方法来解决这个任务。

嗯，好的，所以你将这两个文本字段作为单独的文件？

是的，这两个是分开的，因为它在注册页面和登录页面中很常见。

如何将我的焦点电子邮件转移到密码文本字段？

谢谢@zpouip，你的代码已经成功运行，我在代码结构中犯了错误，所以我没有得到想要的输出。

【参考方案2】：

您是否尝试过直接从相关焦点节点请求焦点？

return TextField(
      focusNode: myFocusNode,
);

//to make focus go to the TextField try call this.
_changeFocus()
 myFocusNode.requestFocus();

【讨论】：

不，它不起作用。你能告诉我如何使用回调函数请求focusNode吗？

你应该向问题展示你的代码。