Невозможно сфокусироваться на TextField на новой странице после навигации во Flutter

По какой-то причине я не могу сосредоточиться на TextField после на следующей странице после навигации. Клавиатура автоматически закрывается при выборе TextField. Если я установлю autofocus: true в TextField, клавиатура будет бесконечно всплывать и сразу же закрываться снова и снова.

Я столкнулся с этим, когда мое приложение было разумного размера, но я смог воссоздать это в минимальном примере приложения.

Я использую Dart 2.0.0-dev.55.0 с бета-версией Flutter v0.3.2.

Код для главной страницы:

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 на главной странице, если я помещу его туда, но не могу на том, что на странице настроек. Я предполагаю, что это как-то связано с тем, что клавиатура не имеет приоритета над всплывающей страницей? Или что происходит? Как я могу заставить приложение фокусироваться только на полях ввода на странице с переходом?


person Pybanana    schedule 25.05.2018    source источник
comment
Думаю, проблема в том, что он находится внутри ListView. Можете попробовать сдвинуть его. Я сам недавно столкнулся с этим. Я предполагаю, что это ошибка, но, возможно, я тоже не знаю. github.com/flutter/flutter/issues/10498   -  person Günter Zöchbauer    schedule 25.05.2018
comment
@ GünterZöchbauer Я изменил тело на body: TextField(), на странице настроек и все еще не могу сосредоточиться на нем. То же самое произойдет, если я заменю ListView на Column. Я собираюсь подробнее изучить проблему, которую вы связали, но, к сожалению, пока что ошибка все еще жива.   -  person Pybanana    schedule 25.05.2018
comment
Если это не так, я не знаю.   -  person Günter Zöchbauer    schedule 25.05.2018


Ответы (7)


Итак, проблема возникает из-за того, что я поставляю GlobalKey в Scaffold. Удаление ключа решает проблему. Не совсем уверен, почему, но проблема в основном объясняется в этой проблеме Github.

Я использовал клавишу для отображения всплывающего окна закусочной при отображении сообщения об ошибке при проверке ввода, но теперь я предпочитаю просто отображать сообщение об ошибке в текстовом виджете.

person Pybanana    schedule 25.05.2018
comment
Проблема заключалась в том, что вы создали глобальный ключ внутри метода сборки. Попробуйте переместить инициализацию глобального ключа за пределы метода сборки, и все работает нормально :) - person Rohit TP; 28.06.2020

Была аналогичная проблема с глобальным ключом. Просматривал аналогичный пример в примере сокращения архитектуры flutter.

Используя такой ключ, я исправил его.

static final GlobalKey<FormFieldState<String>> _orderFormKey = GlobalKey<FormFieldState<String>>();
person ashkan117    schedule 25.06.2018
comment
Удалите, если кто-нибудь понимает .... Если вас интересует причина определенного поведения, не помещайте это в ответ, так как это не форум. Вместо этого откройте для него новый вопрос. - person geisterfurz007; 26.06.2018

Чтобы решить эту проблему, используйте следующий код.

// 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...',
  )
)
person Sateesh    schedule 07.11.2019
comment
Почему голосование против? Используя это решение, ваша клавиатура будет стабильной. В фокусе он не выскакивает и не выскакивает. Он очень хорошо работает с виджетом с отслеживанием состояния - person Sateesh; 04.12.2019

Просто добавьте autofocus как true, это откроет клавиатуру при переходе на новый экран.

 TextField(
            autofocus: true,
          ),
person Jitesh Mohite    schedule 03.07.2020

У меня также была эта проблема с узлом фокуса, добавленным в текстовое поле. Удаление узла фокуса решило мою проблему.

person Brett Young    schedule 03.07.2018

Не уверен, в чем ваша проблема, так как я больше не могу ее воспроизвести. Я только что попробовал ваш код в бета-версии Flutter Channel, 1.18.0-11.1.pre, и все заработало, как должно, без изменения исходного кода.

Похоже, это скорее ошибка Флаттера.

person Tomas Baran    schedule 30.05.2020

в моем случае autofocus: true не работает только на симуляторе iOS, но он будет работать на реальном устройстве как для Android, так и для iOS.

person Alexa289    schedule 21.05.2021