9.切换tabbar页面后状态保持

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

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

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

（1）加入AutomaticKeepAliveClientMixin保持页面
在home_page.dart里加入AutomaticKeepAliveClientMixin混入，加入后需要重写wantKeepAlive方法。主要代码如下：

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive =>true;
}

（2）修改index_page.dart
修改index_page.dart,思路就是增加一个IndexedStack包裹在tabBodies外边。
全部代码如下

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_page.dart';
import 'cart_page.dart';
import 'category_page.dart';
import 'member_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


class IndexPage extends StatefulWidget{
  _IndexPageState createState() => _IndexPageState();
}


class _IndexPageState extends State<IndexPage>{

  PageController _pageController;

  //声明一个List变量 定义底部导航的文字和图标
  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()
  ];

//currentIndex tabBodies的List索引，改变索引就相当于改变了页面
  //利用currentIndex得到当前选择的页面，并进行呈现出来
  int currentIndex = 0;
  var currentPage;
  @override
  void initState(){
    currentPage = tabBodies[currentIndex];
    
    _pageController = PageController()..addListener((){
      if (currentPage != _pageController.page.round()) {
        setState(() {
          currentPage = _pageController.page.round();
        });
      }  
      
    });
    
    super.initState();
  }


  @override
  Widget build(BuildContext context){

    //初始化设置尺寸
    ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(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,
      ),
    );
  }
}

的。