Flutter中TextField与BLoC联动问题：值未更新或键盘意外收起

我之前在做表单联动的时候也踩过一模一样的坑，咱们来拆解问题，找到满足你所有需求的解决方案。

先分析你之前方案的问题 #

1. 第一个用initialValue的方案：
   这个方案的核心问题是TextField一旦初始化完成，initialValue就不会再响应后续的state变化了——BlocBuilder重建时，initialValue只是作为初始值传入，但TextField已经处于编辑状态，不会自动更新文本内容，所以DropdownButton触发Cubit更新后，TextField不会同步。

2. 第二个用BlocConsumer的方案：
   你遇到的光标跳转、焦点丢失问题，是因为每次state变化（包括用户输入触发的Cubit更新），listener里都会直接设置_controller.text = state.title，这会强制重置TextField的文本，同时打乱光标位置和焦点状态。而且这种写法还可能造成循环更新：用户输入→controller变化→Cubit更新→state变化→listener重置controller→再次触发controller变化...

满足所有要求的解决方案 #

核心思路是：区分用户输入的更新和外部（比如DropdownButton）的更新，避免循环触发，同时保持光标位置和焦点状态。

我们可以通过以下步骤实现：

• 使用TextEditingController管理TextField的文本
• 在initState中初始化controller，并设置初始值
• 监听controller的文本变化，仅当文本与当前Cubit state的值不一致时，更新Cubit
• 监听Cubit的state变化，仅当state中的值与controller当前文本不一致时，更新controller的文本（同时保持光标位置）
• 使用BlocBuilder构建TextField，不需要依赖initialValue

完整代码示例

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// 定义Cubit和State
class TitleCubit extends Cubit<String> {
  TitleCubit(String initialTitle) : super(initialTitle);

  void setTitle(String newTitle) => emit(newTitle);
}

class TextFieldBlocDemo extends StatefulWidget {
  const TextFieldBlocDemo({super.key});

  @override
  State<TextFieldBlocDemo> createState() => _TextFieldBlocDemoState();
}

class _TextFieldBlocDemoState extends State<TextFieldBlocDemo> {
  late final TextEditingController _titleController;
  late final FocusNode _titleFocusNode;
  late final TitleCubit _titleCubit;
  StreamSubscription? _stateSubscription;

  @override
  void initState() {
    super.initState();
    // 获取Cubit实例
    _titleCubit = context.read<TitleCubit>();
    
    // 初始化controller和focusNode
    _titleController = TextEditingController(text: _titleCubit.state);
    _titleFocusNode = FocusNode();

    // 监听controller的文本变化，更新Cubit（避免循环）
    _titleController.addListener(() {
      final currentText = _titleController.text;
      if (currentText != _titleCubit.state) {
        _titleCubit.setTitle(currentText);
      }
    });

    // 监听Cubit的state变化，更新controller（避免循环，保持光标位置）
    _stateSubscription = _titleCubit.stream.listen((newTitle) {
      if (newTitle != _titleController.text) {
        // 记录当前光标位置
        final cursorPosition = _titleController.selection.baseOffset;
        _titleController.text = newTitle;
        // 恢复光标位置（如果光标位置超过新文本长度，就设置到末尾）
        _titleController.selection = TextSelection.fromPosition(
          TextPosition(offset: cursorPosition.clamp(0, newTitle.length)),
        );
      }
    });
  }

  @override
  void dispose() {
    _titleController.dispose();
    _titleFocusNode.dispose();
    _stateSubscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("TextField + BLoC Demo")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // TextField部分
            BlocBuilder<TitleCubit, String>(
              builder: (context, state) {
                return TextFormField(
                  controller: _titleController,
                  focusNode: _titleFocusNode,
                  decoration: const InputDecoration(labelText: "标题"),
                );
              },
            ),
            const SizedBox(height: 20),
            // DropdownButton部分
            DropdownButton<String>(
              value: _titleCubit.state == "默认标题" ? "默认标题" : null,
              items: const [
                DropdownMenuItem(value: "默认标题", child: Text("默认标题")),
                DropdownMenuItem(value: "下拉选项1", child: Text("下拉选项1")),
                DropdownMenuItem(value: "下拉选项2", child: Text("下拉选项2")),
              ],
              onChanged: (value) {
                if (value != null) {
                  _titleCubit.setTitle(value);
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

为什么这个方案满足你的所有要求？ #

1. TextField输入同步到Cubit：通过_titleController.addListener监听用户输入，仅当文本与Cubit state不一致时更新Cubit，避免循环触发。
2. Cubit更新同步到TextField：通过监听Cubit的stream，仅当state值与controller文本不一致时更新，同时恢复光标位置，不会打乱用户输入体验。
3. 无焦点丢失/键盘收起问题：只有真正需要更新文本时才修改controller，不会触发不必要的TextField重建，焦点状态保持稳定。
4. 初始值设置且无自动聚焦：在initState中初始化controller的文本为Cubit的初始state，同时没有设置autofocus: true，符合需求。

额外注意点 #

• 一定要在dispose方法中销毁controller、focusNode和stream订阅，避免内存泄漏。
• 如果你的state是复杂对象（比如包含多个字段的Model），只需要对比对应字段的值即可，不需要整个state对比。

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