1、前言

首先我们想一下，如果在 Android 中实现布局切换，通常的思路是：

做一个 viewpager
一组 Fragment
每个 Fragment 绑定一个 xml
最后填充至 viewpager

2、Flutter 实现

上边提到的用安卓原生做，思路是很明确，但是代码量还是有的，那么来看一下， Flutter 如何使用 Viewpager 实现的。

2.1、创建有状态 Widget

首先创建有状态 StatefulWidget，然后构建 state：_ApplicationPageState

class ApplicationPage extends StatefulWidget {//@override
　　//_ApplicationPageState createState() => new _ApplicationPageState();
　　 等同于上边注释掉的 createState(); @override
    State<StatefulWidget> createState() { // TODO: implement createState
      return _ApplicationPageState();
    }
}

2.2、state

Scaffold 实现了基本的纸墨设计布局结构。所以我们 new Scaffold 然后 return 即可。

class _ApplicationPageState extends State<ApplicationPage> { 
  int _currentPageIndex = 0;
  var _pageController = new PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) { return new Scaffold(
      appBar: new AppBar(
         title: new Text("我是AppBar"),
         centerTitle: true,
       ),
      body: new PageView.builder(
          onPageChanged:_pageChange,
          controller: _pageController,
          itemBuilder: (BuildContext context,int index){ return index==1?new Text("我是第一页"):new Text("我是第二页");
          },
          itemCount: 2,
      ),
      bottomNavigationBar: new BottomNavigationBar(items: [
              BottomNavigationBarItem(
                  icon: new Icon(Icons.category), title: new Text("首页")),
              BottomNavigationBarItem(
                  icon: new Icon(Icons.message), title: new Text("我的")),
          ],
          currentIndex: _currentPageIndex,
          onTap: onTap,
      ),
    );
  } // bottomnaviagtionbar 和 pageview 的联动
  void onTap(int index) {
   // 过pageview的pagecontroller的animateToPage方法可以跳转
   _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 300), curve: Curves.ease);
  } void _pageChange(int index) {
    setState(() { if (_currentPageIndex != index) {
        _currentPageIndex = index;
      }
    });
  }

}

关于上边有几个方法：

Scaffold 有下面几个主要属性：