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

时间:2018-03-21 15:54:03

标签: android ios dart flutter

我有两个textFormField小部件。一旦用户竞争了第一个textField,我想关注下一个textField。 Flutter有办法做到这一点吗?目前,完成按钮只是关闭键盘。我猜测focusNode类可能是这个的答案,但不确定如何工作有没有人有任何好的focusNode类的例子?提前谢谢。

4 个答案:

答案 0 :(得分:20)

是的,FocusNode和来自TextFormFieldonFieldSubmitted可能是要走的路。

  

FocusScope.of(上下文).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(),但希望上面的示例为您提供足够的上下文来为您的用例构建适当的解决方案。

答案 1 :(得分:19)

截屏:

enter image description here


无需使用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(),
        ),
      ],
    ),
  );
}

答案 2 :(得分:0)

Android中也有类似的方法。

添加

textInputAction

TextFormField小部件的参数,然后将该属性添加为;

 TextInputAction.next

答案 3 :(得分:0)

我是这样做的:

  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();
      }
    },
  ),