0 ListView的性能瓶颈
我们知道，ListView等长列表在滚动的过程中是Lazy Loading机制，按需加载滑窗范围内的items，但如果items的高度是没有显性的指定的时候，将会有严重的性能问题，该性能问题的根因我在《社区说｜Flutter 长列表 Lazy Loading 机制解析》做过详细的分析，感兴趣的同学可以了解一下，有助于理解Flutter的长列表加载机制。
这个性能问题也困扰了社区多年，ListView: Poor performance with many variable-extent items + jumpTo (scroll bar, trackpad, mouse wheels)，受到了很多开发者的关注：
这里我写了一个Demo，大家可以对比下有ListView.itemExtent和没有设置ListView.itemExtent的性能差异：
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(
MaterialApp(
// showPerformanceOverlay: true,
scrollBehavior: MyScrollBehavior(),
home: const Scaffold(
body: ExampleApp(),
),
),
);
}
class ExampleApp extends StatefulWidget {
const ExampleApp({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return ExampleAppState();
}
}
class ExampleAppState extends State<ExampleApp> {
final scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scrollbar(
thumbVisibility: true,
controller: scrollController,
child: ListView.builder(
controller: scrollController,
itemCount: 100000,
// itemExtent: 50.0,
// itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
// return dimensions.viewportMainAxisExtent / 10;
// },
// itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
// if (index % 2 == 0) {
// return 50;
// } else {
// return 100;
// }
// },
itemBuilder: (BuildContext context, int index) {
var color = Colors.yellow;
if (index % 2 == 0) {
color = Colors.red;
}
return ColoredBox(
color: color,
child: Center(
child: Text('Item $index'),
),
);
},
),
);
}
}
class MyScrollBehavior extends MaterialScrollBehavior {
@override
Widget buildScrollbar(
BuildContext context, Widget child, ScrollableDetails details) {
return child;
}
@override
Set<PointerDeviceKind> get dragDevices => <PointerDeviceKind>{
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}
如上图所示，如果ListView不设置itemExtent，无法通过右侧的Scrollbar拖拽滑动，笔者运行环境为window PC，应用的主进程直接卡死，无法恢复。
当设置itemExtent之后，应用有着丝滑的性能：
目前，不同长度的item长列表的性能问题即将得到改善，[New feature] Allowing the ListView slivers to have different extents while still having scrolling performance，这个提交目前已经在Review阶段，相信很快会合入的master分支。
1 新特性-> ListView.itemBuilder
我们知道当前ListView可以通过ListView.itemExtent或者ListView.prototypeItem设置高度来提高Lazy Loading过程中的耗时，但这两个属性都是对所有items生效，如果items之间的高度不完全相同，对于长列表的性能问题还是挺严重的，在我们的业务的场景中，相信有很多这样的诉求。
PR131393提供一个新的属性itemExtentBuilder，有了它，我们可以为每一个item指定高度，同时有着丝滑的性能体验。
我们将上面demo修改一下：
child: ListView.builder(
controller: scrollController,
itemCount: 100000,
itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
if (index % 2 == 0) {
return 50;
} else {
return 100;
}
},
itemBuilder: (BuildContext context, int index) {
var color = Colors.yellow;
if (index % 2 == 0) {
color = Colors.red;
}
return ColoredBox(
color: color,
child: Center(
child: Text('Item $index'),
),
);
},
)
这样，当items的高度并不完全一样的时候，同样有着丝滑的滚动性能：
我们来看下itemExtentBuilder的文档说明：
/// {@template flutter.widgets.list_view.itemExtentBuilder}
/// If non-null, forces the children to have the corresponding extent returned
/// by the builder.
///
/// Specifying an [itemExtentBuilder] is more efficient than letting the children
/// determine their own extent because the scrolling machinery can make use of
/// the foreknowledge of the children's extent to save work, for example when
/// the scroll position changes drastically.
///
/// Unlike [itemExtent] or [prototypeItem], this allows children to have
/// different extents.
///
/// See also:
///
/// * [SliverExplicitExtentList], the sliver used internally when this property
/// is provided. It constrains its box children to have a specific given
/// extent along the main axis.
/// * The [itemExtent] property, which allows forcing the children's extent
/// to a given value.
/// * The [prototypeItem] property, which allows forcing the children's
/// extent to be the same as the given widget.
/// {@endtemplate}
final ItemExtentGetter? itemExtentBuilder;
/// Called to get the item extent by the index of item.
typedef ItemExtentGetter = double Function(int index, SliverLayoutDimensions dimensions);
itemExtentBuilder是回调函数类型，入参为要获取高度的item的index索引，同时，还传递了SliverLayoutDimensions，我们看一下它里面有哪些信息：
/// Relates the dimensions of the [RenderSliver] during layout.
///
/// Used by [ListView.itemExtentBuilder] and [SliverExplicitExtentList.itemExtentBuilder].
@immutable
class SliverLayoutDimensions {
/// Constructs a [SliverLayoutDimensions] with the specified parameters.
const SliverLayoutDimensions({
required this.scrollOffset,
required this.precedingScrollExtent,
required this.viewportMainAxisExtent,
required this.crossAxisExtent
});
/// {@macro flutter.rendering.SliverConstraints.scrollOffset}
final double scrollOffset;
/// {@macro flutter.rendering.SliverConstraints.precedingScrollExtent}
final double precedingScrollExtent;
/// The number of pixels the viewport can display in the main axis.
///
/// For a vertical list, this is the height of the viewport.
final double viewportMainAxisExtent;
/// The number of pixels in the cross-axis.
///
/// For a vertical list, this is the width of the sliver.
final double crossAxisExtent;
@override
bool operator ==(Object other) {
if (identical(this, other)) {
return true;
}
if (other is! SliverLayoutDimensions) {
return false;
}
return other.scrollOffset == scrollOffset &&
other.precedingScrollExtent == precedingScrollExtent &&
other.viewportMainAxisExtent == viewportMainAxisExtent &&
other.crossAxisExtent == crossAxisExtent;
}
@override
String toString() {
return 'scrollOffset: $scrollOffset'
' precedingScrollExtent: $precedingScrollExtent'
' viewportMainAxisExtent: $viewportMainAxisExtent'
' crossAxisExtent: $crossAxisExtent';
}
SliverLayoutDimensions主要携带了四个信息：
scrollOffset：注意这里的offset是相对于当前Sliver的坐标系，指示当前最先可见的位置的偏移，例如，如果如果growthDirection为GrowthDirection.forward，且sliver位于初始位置，则该值为0；precedingScrollExtent：在当前Sliver之前已经被处理过的其它Sliver的长度，如果只有一个Sliver，则该值为0；viewportMainAxisExtent：Scrollable在主轴方向的Viewport的长度；crossAxisExtent：在交叉轴方向的长度，对于垂直滚得控件来说，它是Sliver的宽度；
有了SliverLayoutDimensions参数之后，我们能够更灵活设置item的长度，例如，设置item固定为viewportMainAxisExtent的十分之一，也就是最多显示10个item：
itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
return dimensions.viewportMainAxisExtent / 10;
运行效果如下：
注意观察，当resize窗口的时候，列表里始终显示的是10条item，是不是很灵活呢？
2 总结
关于ListView.itemExtentBuilder我们就介绍到这里，有关它的技术实现源码，我们可以继续在PR 131393中交流吧，希望这个新特性能够对你的业务有所帮助:)
作者长期活跃在Flutter开源社区，欢迎大家一起参与开源社区的共建，如果您也有意愿参与Flutter社区的贡献，可以与作者联系。–>GITHUB
您也许还对这些Flutter技术分享感兴趣：
