Flutter 三种方式实现页面切换后保持原页面状态

前言：

在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。
在正文之前，先看一些常见的App导航，以喜马拉雅FM为例:

它拥有一个固定的底部导航以及首页的顶部导航，可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面，之前的页面状态都是始终维持的，下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果

第一步：实现固定的底部导航

在通过flutter create生成的项目模板中,我们先简化一下代码，将MyHomePage提取到一个单独的home.dart文件，并在Scaffold脚手架中添加bottomNavigationBar底部导航，在body中展示当前选中的子页面。

/// home.dart
import 'package:flutter/material.dart';

import './pages/first_page.dart';
import './pages/second_page.dart';
import './pages/third_page.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final items = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(Icons.music_video), title: Text('听')),
    BottomNavigationBarItem(icon: Icon(Icons.message), title: Text('消息'))
  ];

  final bodyList = [FirstPage(), SecondPage(), ThirdPage()];

  int currentIndex = 0;

  void onTap(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        bottomNavigationBar: BottomNavigationBar(
            items: items,
            currentIndex: currentIndex, 
            onTap: onTap
        ),
        body: bodyList[currentIndex]
    );
  }
}

其中的三个子页面结构相同，均显示一个计数器和一个加号按钮，以first_page.dart为例：

/// first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int count = 0;

  void add() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Text('First: $count', style: TextStyle(fontSize: 30))
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: add,
          child: Icon(Icons.add),
        )
    );
  }
}

当前效果如下：