我们会发现 每次滑动的时候都会触发子组件中的 build方法 print(widget.url);
可见 PageView 默认并没有缓存功能,一旦页面滑出屏幕它就会被销毁 ,实际项目开发中对页面进行缓存是很常见的一个需求,下面我们就看看如何使用AutomaticKeepAliveClientMixin 缓存页面。
class PageViewKeepAlive extends StatefulWidget {
const PageViewKeepAlive({super.key});
@override
State<PageViewKeepAlive> createState() => _PageViewKeepAliveState();
}
class _PageViewKeepAliveState extends State<PageViewKeepAlive> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Title'),
),
body: PageView.builder(
scrollDirection: Axis.vertical,
itemCount: 10,
itemBuilder: (context, index) {
return KeepAliveWrapper( //注意:如果页面比较多,缓存会耗费内存 , 注意 注意
child: MyContainer(num: index,),
);
}),
);
}
}
//自定义组件
class MyContainer extends StatefulWidget {
final int num;
const MyContainer({super.key, required this.num});
@override
State<MyContainer> createState() => _MyContainerState();
}
class _MyContainerState extends State<MyContainer> {
@override
Widget build(BuildContext context) {
print(widget.num); //默认数据是没有缓存,每次滑动都会执行build
return Center(
child: Text(
"第${widget.num}屏",
style: Theme.of(context).textTheme.headline1,
));
}
}