Flutter Bloc：解决TextField实时输入的状态更新异常问题

问题根源分析 #

你遇到的输入覆盖、光标跳位、控制器丢失数据问题，核心原因在于：

1. TextEditingController生命周期错误：如果在build方法内创建控制器，Widget重建时会生成新实例，丢失原有输入数据。
2. 状态反向同步冲突：每次输入触发状态更新后，若从Bloc状态重新赋值给controller.text，会强制覆盖当前输入内容，导致光标跳至末尾。
3. 延迟同步的不合理性：用Future.delayed规避问题，本质是回避了状态与控制器的同步逻辑冲突。

优化方案实现 #

下面是满足所有需求的简洁实现，核心是将控制器生命周期与Widget绑定，优化状态同步逻辑：

1. 持久化TextEditingController

将控制器定义为StatefulWidget的成员变量，在initState初始化、dispose销毁，避免重建丢失数据：

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

  @override
  State<AgeInputSection> createState() => _AgeInputSectionState();
}

class _AgeInputSectionState extends State<AgeInputSection> {
  late TextEditingController ageController;

  @override
  void initState() {
    super.initState();
    ageController = TextEditingController();
    // 从Bloc初始状态加载年龄
    final initialAge = context.read<AgeCalBloc>().state.age;
    if (initialAge != null) {
      ageController.text = initialAge.toString();
    }
  }

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

2. 优化TextField与状态同步

去掉延迟，直接在onChanged同步状态；同时调整hintText逻辑，输入为空时显示默认值：

@override
  Widget build(BuildContext context) {
    return BlocBuilder<AgeCalBloc, AgeCalState>(
      builder: (context, state) {
        // 处理外部状态变化同步（如其他页面修改年龄），同时保留光标位置
        final stateAgeStr = state.age?.toString() ?? "";
        if (stateAgeStr != ageController.text) {
          final cursorPos = ageController.selection.base.offset;
          ageController.text = stateAgeStr;
          ageController.selection = TextSelection.fromPosition(
            TextPosition(offset: cursorPos.clamp(0, stateAgeStr.length))
          );
        }

        return Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Theme.of(context).colorScheme.primaryContainer,
          ),
          height: 200,
          child: Column(
            children: [
              const Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Age",
                    style: TextStyle(fontSize: 15),
                  ),
                ],
              ),
              TextField(
                textAlign: TextAlign.center,
                controller: ageController,
                onChanged: (value) {
                  // 实时同步输入到Bloc状态
                  context.read<AgeCalBloc>().add(UpdateAgeTextFielsEvent(value));
                },
                style: TextStyle(
                  fontSize: 60,
                  fontWeight: FontWeight.bold,
                  color: Theme.of(context).colorScheme.onBackground,
                ),
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(
                  hintText: ageController.text.isEmpty ? "22" : "",
                  hintStyle: TextStyle(
                    fontSize: 60,
                    fontWeight: FontWeight.bold,
                    color: Theme.of(context)
                        .colorScheme
                        .onBackground
                        .withOpacity(0.5),
                  ),
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                ),
              ),

3. 优化加减按钮逻辑

直接从控制器或状态获取当前值，计算后更新控制器并同步状态，同时处理默认值和边界（防止年龄为负）：

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SecBtn(
                    onpress: () {
                      final currentText = ageController.text.isNotEmpty
                          ? ageController.text
                          : state.age?.toString() ?? "22";
                      int age = int.tryParse(currentText) ?? 22;
                      age++;
                      ageController.text = age.toString();
                      context.read<AgeCalBloc>().add(UpdateAgeTextFielsEvent(age.toString()));
                    },
                    icon: Icons.add,
                  ),
                  SecBtn(
                    onpress: () {
                      final currentText = ageController.text.isNotEmpty
                          ? ageController.text
                          : state.age?.toString() ?? "22";
                      int age = int.tryParse(currentText) ?? 22;
                      if (age > 0) {
                        age--;
                        ageController.text = age.toString();
                        context.read<AgeCalBloc>().add(UpdateAgeTextFielsEvent(age.toString()));
                      }
                    },
                    icon: Icons.minimize,
                  )
                ],
              ),
            ],
          ),
        );
      },
    );
  }
}

方案优势 #

• 无延迟实时输入：去掉Future.delayed，输入内容不会被覆盖，支持多位数字输入。
• 光标位置正常：仅在外部状态变化时同步控制器，且保留光标位置，解决中间删除时跳位问题。
• hintText自动切换：输入为空时显示"22"，输入后自动隐藏。
• 加减按钮逻辑完善：默认值处理合理，同时限制年龄不小于0。
• 控制器持久化：避免Widget重建丢失输入数据。

内容的提问来源于stack exchange，提问作者c.dipu0