Flutter移动电商实战 --（16）切换后页面状态的保持AutomaticKeepAliveClientMixin

ゝ一世哀愁。 2023-06-01 05:57 2阅读 0赞

> 底栏切换每次都重新请求是一件非常恶心的事，flutter 中提供了AutomaticKeepAliveClientMixin 帮我们完成页面状态保存效果。

#### 1、AutomaticKeepAliveClientMixin ####

AutomaticKeepAliveClientMixin 这个 Mixin 是 Flutter 为了保持页面设置的。哪个页面需要保持页面状态，就在这个页面进行混入。

不过使用使用这个 Mixin 是有几个先决条件的：

*  使用的页面必须是 StatefulWidget，如果是 StatelessWidget 是没办法办法使用的。
 *  其实只有两个前置组件才能保持页面状态：PageView 和 IndexedStack。
 *  重写 wantKeepAlive 方法，如果不重写也是实现不了的。

#### 2、修改index\_page.dart ####

明白基本知识之后，就可以修改 index\_page.dart，思路就是增加一个 IndexedStack 包裹在 tabBodies 外边。

整体代码如下：

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'home_page.dart';
    import 'category_page.dart';
    import 'cart_page.dart';
    import 'member_page.dart';
    
    
    class IndexPage extends StatefulWidget {
      _IndexPageState createState() => _IndexPageState();
    }
    
    class _IndexPageState extends State<IndexPage>{
    
      PageController _pageController;
    
      final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(
          icon:Icon(CupertinoIcons.home),
          title:Text('首页')
        ),
        BottomNavigationBarItem(
          icon:Icon(CupertinoIcons.search),
          title:Text('分类')
        ),
        BottomNavigationBarItem(
          icon:Icon(CupertinoIcons.shopping_cart),
          title:Text('购物车')
        ),
         BottomNavigationBarItem(
          icon:Icon(CupertinoIcons.profile_circled),
          title:Text('会员中心')
        ),
      ];
    
      final List<Widget> tabBodies = [
        HomePage(),
        CategoryPage(),
        CartPage(),
        MemberPage()
      ];
    
      int currentIndex= 0;
      var currentPage ;
    
      @override
      void initState() {
       currentPage=tabBodies[currentIndex];
       _pageController=new PageController()
          ..addListener(() {
            if (currentPage != _pageController.page.round()) {
              setState(() {
                currentPage = _pageController.page.round();
              });
            }
      });
      super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
          bottomNavigationBar: BottomNavigationBar(
            type:BottomNavigationBarType.fixed,
            currentIndex: currentIndex,
            items:bottomTabs,
            onTap: (index){
              setState(() {
               currentIndex=index;
                currentPage =tabBodies[currentIndex]; 
              });
    
            },
          ),
          body: IndexedStack(
            index: currentIndex,
            children: tabBodies
          )
        );
      }
    }

#### 3、加入Mixin保持页面状态 ####

在 home\_page.dart 里加入 AutomaticKeepAliveClientMixin 混入，加入后需要重写 wantKeepAlive 方法。

主要代码如下：

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
    
      @override
      bool get wantKeepAlive =>true;
    }

为了检验结果，我们在 HomePageState 里增加一个 initState，在里边 print 一些内容，如果内容输出了，证明我们的页面重新加载了，如果没输出，证明我们的页面保持了状态。

@override
    void initState() {
        super.initState();
        print('我打印了哈哈哈哈哈');
    }

转载于:https://www.cnblogs.com/crazycode2/p/11279161.html