在 Flutter 中导航后无法关注新页面中的 TextField

Posted 2023-02-23

【中文标题】在 Flutter 中导航后无法关注新页面中的 TextField

【英文标题】：Cannot focus on TextField in new page after navigating in Flutter

【发布时间】：2018-11-05 05:23:27

【问题描述】：

由于某种原因，导航后我无法在下一页上关注 TextField。选择 TextField 时，键盘会自动关闭。如果我在 TextField 上设置autofocus: true，那么键盘将无限弹出并立即一遍又一遍地关闭。

当我的应用程序大小合理时遇到此问题，但我能够在最小的示例应用程序中重新创建它。

我正在使用 Dart 2.0.0-dev.55.0 和 Flutter beta 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，我可以很好地专注于 TextField，但不能在“设置”页面中的那个上。我认为这与键盘没有优先于弹出页面有关吗？或者发生了什么？如何让应用只关注导航页面上的输入字段？

【问题讨论】：

我猜问题在于它在ListView 内。你能不能试着把它移出来。我自己最近遇到了这个问题。我认为这是一个错误，但我也可能缺少知识。 github.com/flutter/flutter/issues/10498

@GünterZöchbauer 我在“设置”页面中将正文更改为 body: TextField(),，但我仍然无法专注于它。如果我将ListView 更改为Column，也会发生同样的事情。我将进一步研究您链接的问题，但到目前为止，该错误似乎仍然存在，可悲的是。

如果不是这样，我不知道。

【参考方案1】：

就我而言，autofocus:true 不仅适用于 ios 模拟器，而且适用于 android 和 iOS 的真实设备

【参考方案2】：

只需将autofocus 添加为true，这将在导航到新屏幕时打开键盘

 TextField(
            autofocus: true,
          ),

【参考方案3】：

不确定您的问题是什么，因为我无法再重现它。我刚刚在 Flutter Channel beta 1.18.0-11.1.pre 中尝试了您的代码，并且一切正常，无需修改您的原始代码。

看起来更像是 Flutter 的 bug。

【参考方案4】：

要解决这个问题，请使用这样的代码。

// 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...',
  )
)

【讨论】：

为什么要投反对票？使用此解决方案，您的键盘将稳定。在焦点上它不会弹出和弹出。它与有状态的小部件一起工作得很好

【参考方案5】：

我在文本字段中添加了焦点节点时也遇到了这个问题。删除焦点节点解决了我的问题。

【参考方案6】：

全局键也有类似的问题。正在查看flutter的架构redux示例中的类似示例。

使用像这样为我修复的密钥

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

【讨论】：

请删除“如果有人理解...”。如果您对某种行为的原因感兴趣，请不要在答案中发布此内容，因为这不是论坛。而是为它打开一个新问题。

【参考方案7】：

所以问题出在我将 GlobalKey 提供给 Scaffold 的事实。删除密钥解决了这个问题。不完全确定原因，但这个问题主要在 Github issue 中解释。

我在验证输入时显示错误消息时使用该键弹出快餐栏，但现在我选择仅在文本小部件中显示错误消息。

【讨论】：

问题是您在 build 方法中创建了全局键。尝试将全局键初始化移到构建方法之外，一切正常:)