Flutter自定义TextField关闭键盘或滚动时值被清空问题

在Flutter项目开发中，自定义TextField组件（如CaratMinMaxFields及父组件CaratSearchSection）出现异常：关闭键盘或滚动页面时，输入的数值会被意外清空。

核心原因分析 #

这类问题本质是组件状态未被正确持久化，常见触发场景包括：

• 自定义TextField使用StatelessWidget实现，滚动/键盘收起触发组件重建时，临时输入状态直接丢失
• TextEditingController被声明在build方法或局部作用域内，每次组件重建都会重新初始化，导致输入值被重置
• 父组件重建时，子组件被重新实例化，未保留之前的输入状态

解决方案 #

1. 将无状态组件改为有状态组件 #

把CaratMinMaxFields从StatelessWidget改为StatefulWidget，在State类中维护输入状态和控制器，确保组件重建时状态不丢失。

2. 正确管理TextEditingController #

在State的initState中初始化控制器，dispose中销毁，避免重复创建导致状态重置：

class CaratMinMaxFields extends StatefulWidget {
  final String? minInitialValue;
  final String? maxInitialValue;

  const CaratMinMaxFields({
    super.key,
    this.minInitialValue,
    this.maxInitialValue,
  });

  @override
  State<CaratMinMaxFields> createState() => _CaratMinMaxFieldsState();
}

class _CaratMinMaxFieldsState extends State<CaratMinMaxFields> {
  late TextEditingController _minController;
  late TextEditingController _maxController;

  @override
  void initState() {
    super.initState();
    // 初始化时传入初始值
    _minController = TextEditingController(text: widget.minInitialValue);
    _maxController = TextEditingController(text: widget.maxInitialValue);
  }

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    _minController.dispose();
    _maxController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            controller: _minController,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(hintText: "最小值"),
          ),
        ),
        const SizedBox(width: 16),
        Expanded(
          child: TextField(
            controller: _maxController,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(hintText: "最大值"),
          ),
        ),
      ],
    );
  }
}

3. 避免父组件重建导致子组件状态丢失 #

如果父组件CaratSearchSection的重建会触发CaratMinMaxFields重新创建，可通过以下方式处理：

• 使用AutomaticKeepAliveClientMixin保持子组件状态（适用于列表滚动场景）：

class _CaratMinMaxFieldsState extends State<CaratMinMaxFields> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    // ... 组件UI代码
  }
}

• 给子组件分配GlobalKey，确保父组件重建时子组件实例不被替换：

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

  @override
  State<CaratSearchSection> createState() => _CaratSearchSectionState();
}

class _CaratSearchSectionState extends State<CaratSearchSection> {
  final _minMaxFieldsKey = GlobalKey<_CaratMinMaxFieldsState>();

  @override
  Widget build(BuildContext context) {
    return CaratMinMaxFields(key: _minMaxFieldsKey);
  }
}

4. 状态双向同步（可选） #

如果需要将输入值同步到父组件的状态管理（如Provider、Riverpod或父组件State），可在onChanged回调中更新外部状态，并在组件初始化时读取外部状态作为初始值，确保状态双向同步。

内容的提问来源于stack exchange，提问作者Farhana Naaz Ansari