flutter之Tabbar实现两种方式直接切换IndexedStack过渡动画切换PageView

学习 flutter 过程中制作底部导航栏的写法
先上图

首页，备用，我的三个栏目切换

方法一（不带过度动画,IndexedStack 方式）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// 引入 3 页
import './car_page.dart';
import './my_page.dart';
import './index_page.dart';

class HomePage extends StatefulWidget{
    @override
    _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>{
     // 这是监听安卓的返回键操作
    Future<bool> _onWillPop() {
        return showDialog(
            context: context,
            builder: (context) => new AlertDialog(title: new Text('退出 App?'),
                content: new Text('Do you want to exit an App'),
                actions: <Widget>[
                    new FlatButton(onPressed: () => Navigator.of(context).pop(false),
                        child: new Text('不'),
                    ),
                    new FlatButton(onPressed: () async {await pop();
                        },
                        child: new Text('是的'),
                    ),
                ],
            ),
        ) ?? false;
    }

    static Future<void> pop() async {await SystemChannels.platform.invokeMethod('SystemNavigator.pop');
    }


    final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(icon: Icon(CupertinoIcons.home),
            title: Text("首页")
        ),
        BottomNavigationBarItem(icon: Icon(CupertinoIcons.search),
            title: Text("备用")
        ),
        BottomNavigationBarItem(icon: Icon(CupertinoIcons.profile_circled),
            title: Text("我的")
        )
    ];

    final List<Widget> tabBodies = [IndexPage(),
        CarPage(),
        MyPage(),];


    int currentIndex = 0;
    var currenPage;
    @override
    void initState(){currenPage = tabBodies[currentIndex];
        super.initState();}

    @override
    Widget build(BuildContext context){
        return WillPopScope(
            onWillPop: _onWillPop,
            child: Container(
                child: Scaffold(
                    bottomNavigationBar: BottomNavigationBar(
                        type: BottomNavigationBarType.fixed,
                        currentIndex: currentIndex,
                        items: bottomTabs,
                        onTap: (index){setState(() {
                                currentIndex = index;
                                currenPage = tabBodies[currentIndex];
                            });
                        },
                    ),
                    body: IndexedStack(
                        index: currentIndex,
                        children: tabBodies,
                    ),
                ),
            )
        );
    }
}

方法二（带过度动画，PageView 方式）

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// 引入 3 个切换的页面
import './car_page.dart';
import './my_page.dart';
import './index_page.dart';

class HomePage extends StatefulWidget{
    @override
    _HomePageState createState() => _HomePageState();
}
// 要混入 SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
    // 这是监听安卓的返回键操作
    Future<bool> _onWillPop() {
        return showDialog(
            context: context,
            builder: (context) => new AlertDialog(title: new Text('退出 App?'),
                content: new Text('Do you want to exit an App'),
                actions: <Widget>[
                    new FlatButton(onPressed: () => Navigator.of(context).pop(false),
                        child: new Text('不'),
                    ),
                    new FlatButton(onPressed: () async {await pop();
                        },
                        child: new Text('是的'),
                    ),
                ],
            ),
        ) ?? false;
    }

    static Future<void> pop() async {await SystemChannels.platform.invokeMethod('SystemNavigator.pop');
    }

    // 建立下面三个按钮数组
    final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(icon: Icon(CupertinoIcons.home),
            title: Text("首页")
        ),
        BottomNavigationBarItem(icon: Icon(CupertinoIcons.search),
            title: Text("备用")
        ),
        BottomNavigationBarItem(icon: Icon(CupertinoIcons.profile_circled),
            title: Text("我的")
        )
    ];
    // 把 3 个页面排成数组形式方便切换
    final List<Widget> tabBodies = [IndexPage(),
        CarPage(),
        MyPage(),];


    int currentIndex = 0;
    // 创建页面控制器
    var _pageController;
    @override
    void initState(){
        // 页面控制器初始化
        _pageController = new PageController(initialPage : 0);
        super.initState();}

    @override
    Widget build(BuildContext context){
        //WillPopScope 监听安卓返回键
        return WillPopScope(
            onWillPop: _onWillPop,
            child: Container(
                child: Scaffold(
                    bottomNavigationBar: BottomNavigationBar(
                        type: BottomNavigationBarType.fixed,
                        currentIndex: currentIndex,
                        items: bottomTabs,
                        onTap: (index){setState(() {currentIndex = index;});
                            // 点击下面 tabbar 的时候执行动画跳转方法
                            _pageController.animateToPage(index, duration: new Duration(milliseconds: 500),curve:new ElasticOutCurve(4));
                        },
                    ),
                    body: PageView(
                        controller: _pageController,
                        children: tabBodies,
                        onPageChanged: (index){currentIndex = index;},
                    ),
                ),
            )
        ); 
    }
}