Flutter使用Provider监听时TextField光标焦点异常跳转问题求助

问题根源 #

这事儿跟Flutter的Widget树重建和焦点管理逻辑直接相关：

• 用if (testPvd.showA)这种条件渲染时，每次点击showA，Widget树结构会直接改变——原本在列表里的TextField，位置索引会因为上方多了个Text组件而往后挪一位。
• Flutter的焦点系统默认靠Widget在树中的位置和唯一key识别组件。如果不给TextField加唯一key，树结构变化时，Flutter会按位置匹配旧的Element（Widget的实例化对象）和新Widget。比如原本聚焦的是第二个TextField（controller2），添加Text('A')后它在children列表的索引从4变成5，Flutter会把原来对应索引4的带焦点Element，匹配到新索引4的Widget（原第一个TextField），结果就是焦点直接跳上去了。
• 把Text放在TextField下方时，TextField的位置索引没变化，自然不会有匹配错误；用Visibility组件时，Widget树结构根本没变，只是Text组件被隐藏了，TextField位置始终不变，焦点也就不会乱跳。

解决办法 #

两种靠谱的解决方式：

1. 给每个TextField加唯一key
   让Flutter能精准识别每个TextField，不管树结构怎么变都不会搞混焦点：

   class _TestWidgetState extends State<TestWidget> {
     final key1 = GlobalKey();
     final key2 = GlobalKey();
     final key3 = GlobalKey();
     final key4 = GlobalKey();
     
     var controller1 = TextEditingController();
     var controller2 = TextEditingController();
     var controller3 = TextEditingController();
     var controller4 = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       TestProvider testPvd = context.watch<TestProvider>();
   
       return Scaffold(
         body: ListView(
           // 其他代码不变
           children: [
             // 按钮等组件不变
             TextField(key: key1, controller: controller1),
             TextField(key: key2, controller: controller2),
             TextField(key: key3, controller: controller3),
             TextField(key: key4, controller: controller4),
           ],
         ),
       );
     }
   }
   

2. 用Visibility组件替代条件渲染
   保持Widget树结构稳定，代码改动最小：

   // 替换原if条件渲染
   Visibility(visible: testPvd.showA, child: Text('A')),
   Visibility(visible: testPvd.showB, child: Text('B')),
   

内容的提问来源于stack exchange，提问作者Max