web-dev-qa-db-ja.com

Flutterで移動した後、新しいページのTextFieldにフォーカスできません

どういうわけか、ナビゲートした後、次のページでTextFieldに焦点を合わせることができません。 TextFieldが選択されると、キーボードは自動的に閉じます。 autofocus: trueをTextFieldに入力すると、キーボードが無限にポップアップし、すぐに何度も繰り返し終了します。

アプリが適切なサイズのときにこれに遭遇しましたが、最小限のサンプルアプリでこれを再現することができました。

Flartベータv0.3.2でDart 2.0.0-dev.55.0を使用しています。

メインページのコード：

import 'package:flutter/material.Dart';
import 'settings.Dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Helpful text.',),
            // ===== Where navigation happens =====
            RaisedButton(
              onPressed: () {
                Navigator.Push(context, PageRouteBuilder(
                  pageBuilder: (_, __, ___) => SettingsPage()));
              },
              child: Text('Go to input page'),
            ),
          ],
        ),
      ),
    );
  }
}

以下は、TextFieldを含むページのコードです。

import 'package:flutter/material.Dart';

class SettingsPage extends StatefulWidget {
  SettingsPage({Key key}) :
   super(key: key);

  @override
  _SettingsPage createState() => new _SettingsPage();
}


class _SettingsPage extends State<SettingsPage> {

  @override
  Widget build(BuildContext context) {
    final key = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: key,
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Settings"),
      ),
      body: ListView(
        children: <Widget>[
          Text("Enter something"),
          // Can't focus on this widget
          TextField(),
        ],
      ),
    );
  }
}

メインページにTextFieldを配置すると、そこにフォーカスできますが、[設定]ページのTextFieldにはフォーカスできません。ポップアップしたページよりもキーボードが優先されないことに関係があると思いますか？または何が起こっているのですか？ナビゲートされたページの入力フィールドのみにアプリを集中させるにはどうすればよいですか？

dartflutterdart-2
8
Pybanana

だから問題は私が足場にGlobalKeyを供給しているという事実から来ています。キーを削除すると、問題が解決します。正確な理由はわかりませんが、問題は主にこの Githubの問題 で説明されています。

入力の検証時にエラーメッセージを表示するときにキーを使用してスナックバーポップアップを表示していましたが、今はテキストウィジェットにエラーメッセージを表示することを選択しています。

4
Pybanana

グローバルキーで同様の問題が発生していました。 flutterのアーキテクチャのreduxの例で同様の例を調べていました。

修正したようなキーを使用して

static final GlobalKey<FormFieldState<String>> _orderFormKey = GlobalKey<FormFieldState<String>>();
2
ashkan117

この問題を解決するには、次のようなコードを使用します。

// Class private property
static final GlobalKey<FormFieldState<String>> _searchFormKey = GlobalKey<FormFieldState<String>>()

// Inside widget
TextFormField(
  key: _searchFormKey, // Use searchFormKey here like this
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Type here...',
  )
)
0
Sateesh

テキストフィールドにフォーカスノードが追加されるという問題もありました。フォーカスノードを削除すると、問題が解決しました。

0
Brett Young