一旦页面滑出屏幕它就会被销毁 ,实际项目开发中对页面进行缓存是很常见的一个需求,下面我们就看看如何使用AutomaticKeepAliveClientMixin 缓存页面。
注意:使用时一定要注意是否必要,因为对所有列表项都缓存的会导致更多的内存消耗。
class MyPage extends StatefulWidget { const MyPage({super.key}); @override State<MyPage> createState() => _MyPageState(); } class _MyPageState extends State<MyPage> { @override Widget build(BuildContext context) { return Scaffold( body: PageView.builder( itemCount: 5, scrollDirection: Axis.vertical, // 滑动方向为垂直方向 itemBuilder: (BuildContext context, int index) { return Page( index: index, ); }, )); } } class Page extends StatefulWidget { final int index; const Page({super.key, required this.index}); @override State<Page> createState() => _PageState(); } class _PageState extends State<Page> with AutomaticKeepAliveClientMixin { //缓存加with AutomaticKeepAliveClientMixin @override Widget build(BuildContext context) { print("验证是否加缓存"); return Center( child: Text("第${widget.index}"), ); } @override // TODO: implement wantKeepAlive bool get wantKeepAlive => true; //返回true就缓存页面 }
自定义KeepAliveWrapper 缓存页面
AutomaticKeepAliveClientMixin 可以快速的实现页面缓存功能,但是通过混入的方式实现不是很优雅, 所以我们有必要对AutomaticKeepAliveClientMixin 混入进行封装
import 'package:flutter/material.dart'; 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) { super.didUpdateWidget(oldWidget); // 如果 `keepAlive` 属性发生变化,则更新 `wantKeepAlive` 值 if (oldWidget.keepAlive != widget.keepAlive) { // 通知 Flutter 更新 `wantKeepAlive` 的值 updateKeepAlive(); } } } //这里使用covariant协变关键字,感兴趣可以研究一下dart covariant
使用
return KeepAliveWrapper( //页面比较多会耗内存 child: Page( index: index, ), );
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!