如何在flutter中将焦点转移到下一个文本字段？ [英] How to shift focus to next textfield in flutter?

问题描述

我是Flutter的新手。

我正在使用以下小部件构建具有多个文本输入的表单：Form，TextFormField。出现的键盘不显示下一个（应将焦点转移到下一个字段）场操作，而是完成操作（隐藏键盘）。

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

解决方案方案

找到一种实现方法。

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




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

    类FormWidget扩展了StatelessWidget {
   最终焦点= FocusNode（）; 
    @override 
   小部件构建（BuildContext上下文）{
    return Form（
    child：SingleChildScrollView（
    padding：EdgeInsets.symmetric（horizo​​ntal：16.0），
   子项：Column（
    crossAxisAlignment：CrossAxisAlignment.stretch，
   子项：< Widget> [
    TextFormField（
    textInputAction：TextInputAction.next，
    autofocus：true， 
   装饰：InputDecoration（labelText：输入1），
    onFieldSubmitted：（v）{
    FocusScope.of（context）.requestFocus（focus）; 
   }，
   ），
    TextFormField（
    focusNode：focus，
   装饰：InputDecoration（labelText： Input 2），
   ），
   ]，
    ），
   ），
   ）； 
   } 
   } 
     

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

更新：无需 FocusNode 和 FocusScopeNode 即可实现相同的效果code>，只需调用 FocusScope.of（context）.nextFocus（），即可查看 CopsOnRoad解决方案有关如何执行此操作的信息。有关更多信息，请检查文档。

I am new to Flutter.

I am building a form with multiple text inputs using following widgets: Form, TextFormField. The keyboard that appears doesn't show "next" (which should shift the focus to next field) field action instead it is "done" action (which hides the keyborad).

I looked for any hints in official docs, found nothing directly that can be done. I although landed on FocusNode(cookbook, api doc). It provides with mechanism to shift focus by some button or any other action on app, but I want it to be in keyboard.

解决方案

Found a way to achieve it.

1. Displaying Next Icon instead of Done - setting textInputAction parameter to TextInputAction.next

2. Using onFieldSubmitted callback to request focus node of next field.

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

Edit: As stated in the documentation (flutter.io/docs/cookbook/forms/focus), - we also need to manage FocusNode lifecycle. So, init FocusNode in the init() method and dispose in dispose() of the parent Widget. - @AntonDerevyanko

Update: The same can be achieved without FocusNode and FocusScopeNode, by simply calling FocusScope.of(context).nextFocus(), take a look at CopsOnRoad solution on how to do that. For more info check doc.

这篇关于如何在flutter中将焦点转移到下一个文本字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！