flutter - 如何在 ListView.builder flutter 中正确使用 findChildIndexCallback？

Question

我正在尝试使用 findChildIndexCallback 将我的 StatefulWidgets 的状态保存在 ListView.builder 中。

有人可以提供一个示例，说明我如何真正“找到”Listview 子项吗？

我的问题直接来自 issue我做了，这实际上是由 Flutter 团队修复的。

这是我目前无法运行的代码:

ListView.builder(
            itemCount: model.messagesList.length,
            findChildIndexCallback: (key) {
              // final ValueKey<String> valueKey = key as ValueKey<String>;
              // return model.messagesList.indexWhere((element) => element.uid == valueKey.value); // Doesn't change anything, my widgets are all rebuilt on insert
            },
            itemBuilder: (context, index) {
              DMessage message = model.messagesList[index];
              return MessageItem(
                key: ValueKey<String>(message.uid)
                message: message
              );
            }),

Answer 1

只需在项目小部件中使用 StatefulWidget 和 AutomaticKeepAliveClientMixin。子类必须实现 wantKeepAlive，并且它们的构建方法必须调用 super.build(BuildContext)。

class ItemWidget extends StatefulWidget {
  const ItemWidget({Key? key, required this.item}) : super(key: key);

  final int item;

  @override
  State<ItemWidget> createState() => _ItemWidgetState();
}

class _ItemWidgetState extends State<ItemWidget>
    with AutomaticKeepAliveClientMixin {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListTile(
      selected: selected,
      title: Text('Index-${widget.item}'),
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}

并在您的 ListView 上提供 findChildIndexCallback 属性，如下所示:

class ListWidget extends StatelessWidget {
  const ListWidget({Key? key, required this.items}) : super(key: key);

  final List<int> items;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        final item = items[index];
        return ItemWidget(key: ValueKey(item), item: item);
      },
      itemCount: items.length,
      findChildIndexCallback: (Key key) {
        final valueKey = key as ValueKey;
        final index = items.indexWhere((item) => item == valueKey.value);
        if (index == -1) return null;
        return index;
      },
    );
  }
}

这里是 Dart 盘 https://dartpad.dev/?id=b02294906a0b0c77984126e62f5a048d .

• 点击列表中的任何项目，使其成为选中状态
• 使用 FAB 添加新项目，它会将新元素插入到 ListView 的随机索引中
• 添加新项目后，已选择(状态)的项目将保持选中状态