flutter - 如何强制 ListView.builder 刷新？

Question

在我的 Flutter 应用程序中，我有一个 ListView，其中包含几个定制的有状态 Widget(类型为 EditableAreaCard，基于来自定制 Area 对象的数据)。 EditableAreaCard 是可编辑的，如果是这样的话，卡片上会有一个编辑按钮，可以将其带入编辑模式 - 然后会出现取消和保存按钮。

用户可以向列表中添加一个新项目 - 因此创建了一个 Area 对象，并设置了一个标志，以便 ListView.builder 将这个新的 Area 对象添加到列表的顶部，处于可编辑模式。

但是当发生这种情况时，新对象被添加到列表的顶部，但背景颜色错误并且不处于编辑模式。观察此卡片随后被编辑和关闭时的行为，很明显 ListView 并未完全刷新其所有子项，而是重复使用它们 - 索引 0 处的新项目与颜色和(非编辑)状态相同以前的索引 0，现在已下推到索引 1。

这是代码 - 删除了卡片的内容，因为我认为它不相关......但如果需要会发布它。

class AreasScreen extends StatefulWidget {
  static const id = '/areas';

  static _AreasScreenState of(BuildContext context) =>
      context.ancestorStateOfType(const TypeMatcher<_AreasScreenState>());

  @override
  _AreasScreenState createState() => _AreasScreenState();
}

class _AreasScreenState extends State<AreasScreen> {
  Areas _alist = AreaRepo.get();
  Area _new_area = null;
  bool _is_adding_area = false;

  void cancel_add_area() {
    setState(() {
      _new_area = null;
      _is_adding_area = false;
    });
  }

  void finished_adding_area() {
    setState(() {
      _is_adding_area = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Areas of law'),
        leading: IconButton(
            icon: Icon(FontAwesomeIcons.arrowLeft),
            onPressed: () {
              Navigator.pop(context);
            }),
        actions: <Widget>[
          IconButton(
            icon: Icon(FontAwesomeIcons.plusCircle),
            onPressed: () {
              setState(() {
                _is_adding_area = true;
                _new_area = Area(
                  area_name: 'new area',
                  area_colour: '0xFFFFFFFF',
                );
              });
            },
          )
        ],
      ),
      body: ListView.builder(
        itemCount: _alist.areaCount + (_is_adding_area ? 1 : 0),
        itemBuilder: (context, index) {
          Area this_area_item = _is_adding_area
              ? (index == 0 ? _new_area : _alist.sortedList()[index - 1])
              : _alist.sortedList()[index];
          // TODO: somehow this isn't refreshing all items in the list when a card is added
          return EditableAreaCard(
            case_area: this_area_item,
            can_edit: true,
            start_editing: _is_adding_area && index == 0,
            index: index,
          );
        },
      ),
    );
  }
}


class EditableAreaCard extends StatefulWidget {
  Area case_area;
  bool can_edit;
  bool start_editing;

  EditableAreaCard({this.case_area, this.can_edit = false, this.start_editing = false});

  @override
  _EditableAreaCardState createState() => _EditableAreaCardState();
}

class _EditableAreaCardState extends State<EditableAreaCard> {

  TextEditingController _controller;
  Color _editingColor;
  bool _isCurrentlyEditing;

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

  void setInitVars() {
    _controller = TextEditingController(text: widget.case_area.area_name);
    _editingColor = widget.case_area.color();
    _isCurrentlyEditing = widget.start_editing;
  }

  @override
  Widget build(BuildContext context) {
    return Card(…);
  }
}

从根本上说，我想知道如何强制 ListView.builder 完全重建其所有子项，因为它们已经移动了索引。我试过在 EditableAreaCard 中包含一个 Key 参数，但这没有任何区别。

更新 - 上面的最后一句话不太正确...看来我没有正确尝试 Key。见下文 - 它解决了问题。

Answer 1

在创建每个 EditableAreaCard 时，您是否将 key 传递给构造函数？

像这样:

return EditableAreaCard(
            key: ValueKey(this_area_item),
            case_area: this_area_item,
            can_edit: true,
            start_editing: _is_adding_area && index == 0,
            index: index,
          );