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

我正在尝试使用 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
              );
            }),

最佳答案

只需在项目小部件中使用 StatefulWidgetAutomaticKeepAliveClientMixin。子类必须实现 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 的随机索引中
  • 添加新项目后,已选择(状态)的项目将保持选中状态

关于flutter - 如何在 ListView.builder flutter 中正确使用 findChildIndexCallback?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72448181/

相关文章:

ruby-on-rails - Ruby on rails query 不知道怎么写

javascript - 使用 react-chartjs-2 创建对折线图的引用

kubernetes - 由于 'No such file or directory',Kubect

ios - 如何在 App Store Connect 中启用 "Access to Cloud M

python - Gitlab CI 在 Python 脚本输出中换行

r - qqplot 不会作图。将数据帧转换为向量时出错

java - Vertx 运行多个事件循环

javascript - React-TypeScript : Expected 0 argumen

javascript - Django 和 React : csrf cookie is not b

java - 这个官方 Xml 模式是否无效或者是 Jaxb 的错误限制