在我们开发过程中底部导航栏是必不可少的，在flutter中使用BottomNavigationBar时遇到一个问题。在切换BottomNavigationBar的index后，所对应的页面发生了重绘。

问题代码：

class MyAppPageState extends State<MyAppPage> {
  int _currentIndex;
  List<Widget> _controllerList;

  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
    _controllerList = [
      HomePageWidget(),
      ...
    ];
  }
  /*底部导航栏的点击事件*/
  void _bottomNaviOnTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: this._controllerList[this._currentIndex],
      bottomNavigationBar: BottomNavWidget(
        currentIndex: this._currentIndex,
        onTap: this._bottomNaviOnTap,
      ),
    );
  }
}

解决办法：通过IndexedStack组件让BottomNavigationBar对用的所有页面堆积在一起，通过index判断谁显示在最上面。

解决代码：

class MyAppPageState extends State<MyAppPage> {
  int _currentIndex;
  List<Widget> _controllerList;

  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
    _controllerList = [
      HomePageWidget(),
      ...
    ];
  }
  /*底部导航栏的点击事件*/
  void _bottomNaviOnTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: this._currentIndex,
        children: this._controllerList,
      ),
      bottomNavigationBar: BottomNavWidget(
        currentIndex: this._currentIndex,
        onTap: this._bottomNaviOnTap,
      ),
    );
  }
}

总结：

使用IndexedStack来实现会有性能上的问题，在初始化的时候，会一次性的将所有的页面全部被加载。 目前还没有找到更好的办法来解决这个问题。