Flutter AnimatedList删除元素后下方组件显示空白问题排查

核心原因：Widget复用导致状态不同步 #

Flutter的Widget复用机制中，当列表元素位置变动时，若未给子组件设置唯一且稳定的Key，Flutter会根据位置复用旧的Widget实例。而TextField这类输入组件的状态与Widget实例绑定，导致新位置的组件复用了旧的输入状态，最终出现输入框空白但底层数据正常的情况。

具体修复步骤 #

1. 为TermInputCard添加唯一Key #

在AnimatedList的itemBuilder中，给TermInputCard传入基于数据唯一标识的Key，避免依赖易变动的索引：

Widget _buildItem(BuildContext context, int index, Animation<double> animation) {
  final term = _terms[index];
  return SlideTransition(
    position: animation.drive(Tween(begin: const Offset(1, 0), end: Offset.zero)),
    child: TermInputCard(
      key: ValueKey(term.term), // 用Term的唯一字段作为Key，若有ID则优先用ID
      term: term,
      onDelete: () => _removeItem(index),
      onTermChanged: (value) => _updateTerm(index, value),
      onDefinitionChanged: (value) => _updateDefinition(index, value),
    ),
  );
}

注意：不要用index作为Key，删除元素后后续元素的index会变化，仍会导致Key重复，无法解决复用问题。

2. 同步StatefulWidget的状态更新 #

如果TermInputCard是StatefulWidget，需在didUpdateWidget中同步传入的term数据与输入控制器的内容：

class _TermInputCardState extends State<TermInputCard> {
  late TextEditingController _termController;
  late TextEditingController _definitionController;

  @override
  void initState() {
    super.initState();
    _initControllers();
  }

  @override
  void didUpdateWidget(covariant TermInputCard oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 当传入的term数据变化时，更新控制器文本
    if (oldWidget.term != widget.term) {
      _termController.text = widget.term.term;
      _definitionController.text = widget.term.definition;
    }
  }

  void _initControllers() {
    _termController = TextEditingController(text: widget.term.term);
    _definitionController = TextEditingController(text: widget.term.definition);
  }

  // 其他组件逻辑...
}

3. 确认数据操作逻辑正确性 #

确保删除元素时，数据列表与AnimatedList的状态同步更新：

void _removeItem(int index) {
  final removedTerm = _terms.removeAt(index);
  _animatedListKey.currentState?.removeItem(
    index,
    (context, animation) => _buildItem(context, index, animation),
  );
  // 可打印数据列表验证是否正确移除元素
  print(_terms);
}

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