Flutter实现页面状态缓存的几种方法

z.week

已于 2023-11-30 15:08:17 修改

阅读量4.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter 缓存

于 2022-06-20 11:34:54 首次发布

本文链接：https://blog.csdn.net/weixin_45295253/article/details/125368884

Flutter 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Flutter中使用IndexedStack和PageView组件来保持BottomNavigationBar切换时页面的状态，避免组件销毁并实现缓存。使用IndexedStack可以一次性创建所有页面，通过index切换显示；而PageView配合AutomaticKeepAliveClientMixin可以实现页面缓存，通过PageController控制页面切换。这两种方法能够确保页面在切换后仍然保持之前的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

在使用BottomNavigationBar组件进行页面切换时，页面切走时组件会销毁，再切回来时又会重新创建，如何保持页面切走不销毁组件呢(缓存状态)？

有以下两种方法：

1、使用IndexedStack组件缓存页面
IndexedStack组件会把组件一次性先创建好，堆叠窗口，通过index切换显示对应的窗口

List<Widget> _MainList = [HomePage(), KnowledgePage(), MenstrualCalendarPage(), UserPage()];
int currentIndex = 0;

body: IndexedStack(
  index: currentIndex,
  children: _MainList,
),

在这里插入图片描述
2、使用PageView组件，组件混入AutomaticKeepAliveClientMixin配合使用**（推荐使用）**

List<Widget> _MainList = [HomePage(), KnowledgePage(), MenstrualCalendarPage(), UserPage()];
int currentIndex = 0;
late PageController _pageController;

@override
void initState() {
  super.initState();
  this._pageController = PageController(initialPage: this.currentIndex, keepPage: true);
}
@override
void dispose() {
  _pageController.dispose();
  super.dispose();
}
  
Scaffold(
	body: PageView(
	 physics: NeverScrollableScrollPhysics(), // 禁止左右滑动切换页面
	  controller: _pageController,
	  children: _MainList,
	),
	bottomNavigationBar: BottomNavigationBar(
	   onTap: (int index) {
	     setState(() {
	        this.currentIndex = index;
	        _pageController.jumpToPage(index);
	      });
	    },
	);
);

然后在需要缓存的组件里混入AutomaticKeepAliveClientMixin

class _MenstrualCalendarPageState extends State<MenstrualCalendarPage> with AutomaticKeepAliveClientMixin {

  @override
  void initState() {
    super.initState();
    print('创建分类页面');
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(child: MyText('缓存的组件'),);
  }
  
  @override
  bool get wantKeepAlive => true; // 是否开启缓存
}