Question

在Flutter应用程序中，我有一个ListView，其中包含几个定制的有状态小部件（类型为EditableAreaCard，基于定制的Area对象的数据）。 EditableAreaCard可以是可编辑的，如果可以，则该卡上有一个编辑按钮，可将其带入编辑模式-然后出现取消和保存按钮。

用户可以将新项目添加到列表中-创建一个Area对象，并设置一个标志，以便ListView.builder将该新Area对象以可编辑方式添加到列表顶部。

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

这里是代码-删除了Card的胆量，因为我认为这无关紧要...但是会在需要时发布它。


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参数，但这没什么区别。

UPDATE -上面的最后一句话不太正确...似乎我没有正确尝试Key。参见下文-它可以解决问题。

Answer 1

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

类似这样的内容：

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

如何强制ListView.builder刷新？

1 个答案: