使用KeepAliveWrapper包裹:
KeepAliveWrapper源码:
class KeepAliveWrapper extends StatefulWidget {
const KeepAliveWrapper(
{Key? key, @required this.child, this.keepAlive = true})
: super(key: key);
final Widget? child;
final bool keepAlive;
@override
State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}
class _KeepAliveWrapperState extends State<KeepAliveWrapper>
with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
return widget.child!;
}
@override
bool get wantKeepAlive => widget.keepAlive;
@override
void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
if (oldWidget.keepAlive != widget.keepAlive) {
// keepAlive 状态需要更新,实现在 AutomaticKeepAliveClientMixin 中
updateKeepAlive();
}
super.didUpdateWidget(oldWidget);
}
}
使用示例:
@override
Widget build(BuildContext context) {
var children = <Widget>[];
for (int i = 0; i < 6; ++i) {
//只需要用 KeepAliveWrapper 包装一下即可
children.add(KeepAliveWrapper(child:Page( text: '$i'));
}
return PageView(children: children);
}
测试下:
class KeepAliveDemo extends StatelessWidget {
const KeepAliveDemo({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return PageView.builder(
itemCount: 5,
itemBuilder: (BuildContext ctx, int index) {
return KeepAliveWrapper(
child: PageItem(text: "$index"),
keepAlive: true,
);
},
);
}
}
class PageItem extends StatelessWidget {
PageItem({this.text});
final String? text;
@override
Widget build(BuildContext context) {
print("flutter build ${text}");
return Center(child: Text(text!, textScaleFactor: 5.0));
}
}
运行发现,keepAlive为true时每个Item都缓存了,为false时,每个Item都会重新创建,OK。
转自:【致程序猿】Flutter 之 可滚动组件子项缓存 KeepAlive_keepalivewrapper-CSDN博客