为什么在 TextField 周围添加视图时它会失去焦点？

Question

我有一个简单的屏幕，带有TextField. 其上方和下方各有一份信息文本。这些信息文本仅在满足特定条件时才会显示。

最小的例子：

class FooPage extends StatefulWidget {
  const FooPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return FooState();
  }
}

class FooState extends State<FooPage> {
  TextEditingController controller = TextEditingController();
  bool show = true;
  
  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      setState(() => show = controller.text.length < 5);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          show ? const Text("hello1") : const SizedBox.shrink(),
          TextField(controller: controller),
          show ? const Text("hello2") : const SizedBox.shrink(),
        ],
      ),
    );
  }
}

问题是，当信息文本出现或消失时，就会TextField 失去焦点！如果我只使用一个文本（其中任何一个），一切都会正常。

---

ExcludeFocus我可以通过用 或autoFocus: true在 上使用信息文本来解决这个问题TextField。但我很确定这些都不是好的解决方案。至少后一种不可能:)

这里发生了什么？解决这个问题的正确方法是什么？

Answer 1

我无法告诉您为什么我的解决方案有效，但如果您将 GlobalKey 传递给 TextField，它不会失去焦点。

GlobalKey globalKey = GlobalKey();


TextField(controller: controller, key: globalKey,),

也许与此有关？来自文档：

当具有全局键的小部件从树中的一个位置移动到树中的另一位置时，它们会重新设置其子树的父级。为了重新设置其子树的父级，小部件必须在其从树中旧位置删除的同一动画帧中到达其在树中的新位置。