主要是讨论,但真的。
我还没有在网上找到类似的东西,所以我想也许有一些性能击中或可能没有人没有尝试过。但如果没有,这个构造函数将非常有助于减少ListView
的样板代码。
通常,在Flutter中,当我们使用ListView.builder()
构造函数时,它看起来像这样:
@override
Widget build(BuildContext context) {
final items = <ListItem>[
// item 1,
// item 2,
// ... et cetera
];
// ... code
child: ListView.builder(
itemBuilder: (context, index) => SomeFancyListTile(
leading: Image.network(items[index].imageUrl),
title: Text(items[index].title),
),
itemCount: items.length,
),
// ... more code
}
这是完全好的,但最近,我需要使用LinkedList
修改基于相邻元素的小部件,它没有方便的[]
操作符,但只有.elementAt(index)
方法。然而,知道LinkedList
s是如何构造的,代码在使用大型列表时将非常不优化(使整个列表花费O(n^2))。
但后来我想,它不需要这样,因为ListView
一个接一个地呈现项目,这正是迭代器的工作方式。
因此,我实现了一个自定义的SliverChildDelegate
,它确实做到了这一点--将迭代器的功能与ListView
的呈现结合起来。它还提出了一些语法改进,减少了样板代码和每次访问列表项时使用的items[index]
。
import 'package:flutter/material.dart';
typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value);
class SliverIterableBuilderDelegate<T> extends SliverChildDelegate {
SliverIterableBuilderDelegate(
this.iterable, {
required this.builder,
}) : iterator = iterable.iterator;
final Iterable<T> iterable;
final ValueWidgetBuilder<T> builder;
final Iterator<T> iterator;
@override
Widget? build(BuildContext context, int index) {
if (index < 0 || index >= iterable.length) {
return null;
}
if (iterator.moveNext()) {
return builder(context, iterator.current);
}
return null;
}
@override
bool shouldRebuild(covariant SliverChildDelegate oldDelegate) => true;
}
@override
Widget build(BuildContext context) {
final items = <ListItem>[
// item 1,
// item 2,
// ... et cetera
];
// ... code
child: ListView.custom(
childrenDelegate: SliverIterableBuilderDelegate(
builder: (context, value) => SomeFancyListTile(
leading: Image.network(value.imageUrl),
title: Text(value.title),
),
),
// ... more code
}
所以,我想知道这种方法是否有一些缺点?另外,建议添加一个ListView.iterable()
构造函数以进一步减少代码。
1条答案
按热度按时间dgtucam11#
这是一个很好的想法,但是这个实现不起作用。无论滚动方向如何,您都将调用
Iterator.moveNext()
。如果你有一个很长的列表,向下滚动很多,然后向上滚动,你会开始看到列表反向继续。我做了一个例子来展示这种行为,它可以直接复制粘贴到DartPad中:最简单的解决方案是使用普通列表而不是链接列表,这样你就可以快速索引操作。