web-dev-qa-db-ja.com

フラッターで次のテキストフィールドにフォーカスを移動する方法は？

Flutterは初めてです。

次のウィジェットを使用して、複数のテキスト入力を含むフォームを作成しています：Form、TextFormField。表示されるキーボードは、「次」（フォーカスを次のフィールドに移動する）フィールドアクションを表示せず、代わりに「完了」アクション（キーボードを非表示）にします。

公式ドキュメントでヒントを探しましたが、直接行うことはできませんでした。 FocusNode（ cookbook 、 api doc ）に着陸しましたが。それは、アプリ上のボタンまたは他のアクションによってフォーカスを移動するメカニズムを提供しますが、keyboardに入れたいです。

dartflutterflutter-layout
9
Harsh Bhikadia

それを達成する方法を見つけました。

  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（）メソッドでFocusNodeを初期化し、親ウィジェットのdispose（）で破棄します。 -@AntonDerevyanko

25
Harsh Bhikadia