Question

我遇到了一个非常奇怪的Flutter错误，也许有人对此有所了解。

Flutter目前还没有一种很好的方法可以自动将TextField从表单移动到Textfield。推荐的解决方案是为每个Textfield创建一个FocusNode，然后在用户完成编辑后，以编程方式选择下一个FocusNode。

看起来不错，但是如果您的表单不在应用程序的第一个路径上（这通常不是这种情况），它也会引起一些非常奇怪的视觉故障

在第二条路线上，一旦您单击TextField，装饰将短暂闪烁然后消失，但是光标仍将保留。您可以继续选择TextFields，最终在每个字段上都有一个光标。该字段仍然可以正常运行，因此这纯粹是视觉故障。

该问题似乎与导航器密切相关。如果您在带有自定义FocusNode的第一条路线上创建一个屏幕，则其运行情况良好。相反，如果您不在第二个屏幕上使用FocusNodes，它也可以。仅当您将两者结合使用时，问题才会出现。

这是一个显示此问题的简单应用。

import 'package:flutter/material.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: RaisedButton(
            onPressed: () => _pushSecondScreen(context),
            child: Text('Push to a new screen')
          ),
        ),
      )
    );
  }

  void _pushSecondScreen(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(builder: (_) =>     SecondTest()));
  }
}

class SecondTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: ListView(
        padding: EdgeInsets.all(20.0),
        children: List<Widget>.generate(10, (i) => _buildTextField(i)),
      ),
   );
 }

 Widget _buildTextField(int index) {
    // The custom focus node is thrown in here for example, but in a real world app,
    // a reference to the node would be kept so the app can manage focus between the nodes
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: TextField(
        focusNode: FocusNode(),
        decoration: InputDecoration(
          labelText: 'Field $index',
          filled: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(5.0))
          )
        ),
      ),
    );
  }
}

我张贴了代码，以按照以下要点重复此问题： https://gist.github.com/bkayfitz-cara/8da2afd964c7f4417435e9df49b4cd9e

Answer 1

我在多个文本字段上使用FocusNode并在每个字段上都有光标时也有类似的经历。然后我意识到我需要为每个文本字段实例化一个单独的FocusNode，问题就消失了。

Flutter-FocusNodes和Navigator导致TextField失去修饰

1 个答案: