一尘不染

如何在flutter中将焦点转移到下一个文本字段?

flutter

我是Flutter的新手。

我正在使用以下窗口小部件构建具有多个文本输入的表单:Form,TextFormField。出现的键盘不显示“下一个”(应将焦点转移到下一个字段)字段操作,而是“完成”操作(隐藏键盘)。

我在官方文档中寻找任何提示,没有发现直接可以做的事情。我虽然登陆了FocusNode(cookbookapi
doc
)。它提供了一种机制,可以通过应用程序上的某些按钮或其他任何操作来转移焦点,但是我希望它位于 键盘中


阅读 312

收藏
2020-08-13

共1个答案

一尘不染

找到了一种方法来实现它。

  1. 显示下一个图标而不是完成-将textInputAction参数设置为TextInputAction.next

  2. 使用onFieldSubmitted回调请求下一个字段的焦点节点。

        class FormWidget extends StatelessWidget{    
       final focus = FocusNode();
       @override
       Widget build(BuildContext context) {
        return Form(
          child: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                TextFormField(
                  textInputAction: TextInputAction.next,
                  autofocus: true,
                  decoration: InputDecoration(labelText: "Input 1"),
                  onFieldSubmitted: (v){
                    FocusScope.of(context).requestFocus(focus);
                  },
                ),
                TextFormField(
                  focusNode: focus,
                  decoration: InputDecoration(labelText: "Input 2"),
                ),
              ],
            ),
          ),
        );
      }
    }

编辑:如文档所述(flutter.io/docs/cookbook/forms/focus),-我们还需要管理FocusNode生命周期。因此,请使用init()方法中的initFocusNode并将其放置在父Widget的dispose()中。-@AntonDerevyanko

更新:如果没有FocusNodeFocusScopeNode,只需调用FocusScope.of(context).nextFocus(),看看CopsOnRoad解决方案的实现方法,就可以实现相同的目的。有关更多信息,请检查doc

2020-08-13