Flutter setState导致TextField失焦、键盘消失的解决方法

问题原因 #

你当前通过切换两个完整的Row组件实现布局变化，每次调用setState时，Flutter会因Widget树结构改变，将原有的TextField销毁后重新创建，导致焦点丢失、键盘收起。

解决方案 #

方案1：给TextField绑定GlobalKey

通过给TextField设置固定的GlobalKey，让Flutter识别出这是同一个组件，即使父布局变化也不会重建它，从而保留焦点：

// 在State类中定义GlobalKey
final _textFieldKey = GlobalKey<TextFieldState>();

// 定义TextField时使用该key
Widget textField = TextField(
  key: _textFieldKey,
  controller: _textController,
  // 你的其他配置
);

方案2：重构布局，避免切换整个Row

无需创建两个独立的Row，直接在同一个Row中根据文本内容显示/隐藏对应按钮，保持TextField的父结构稳定：

Widget currTextInput = Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    children: [
      // 文本为空时显示相机、上传按钮
      if (_textController.text.isEmpty) ...[
        IconButton(onPressed: () {}, icon: Icon(Icons.camera_alt, size: 28, color: Color(0xff99999A))),
        IconButton(onPressed: () {}, icon: Icon(Icons.upload_file, size: 28, color: Color(0xff99999A))),
      ],
      Expanded(child: textField),
      // 文本不为空时显示发送按钮
      if (_textController.text.isNotEmpty)
        IconButton(onPressed: () {}, icon: Icon(Icons.send, color: Color(0xff99999A))),
    ],
  ),
);

这种方式更高效，仅切换子组件的可见性，不会重建TextField，焦点自然不会丢失。

额外优化 #

监听TextController变化时，建议在initState中添加监听器，避免在build方法中重复触发不必要的逻辑：

@override
void initState() {
  super.initState();
  _textController.addListener(() {
    setState(() {});
  });
}

@override
void dispose() {
  _textController.dispose();
  super.dispose();
}

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