PageView+BottomNavigationBar 实现底部 TAB 切换效果

如标题所示，使用这俩widget 结合的话可以实现 安卓中的 BottomNavigationBar实现的 TAB 切换效果

先看下 PageView 的构造方法：

  PageView.builder({

    Key key,

    this.scrollDirection = Axis.horizontal,

    this.reverse = false,

    PageController controller,

    this.physics,

    this.pageSnapping = true,

    this.onPageChanged,

    @required IndexedWidgetBuilder itemBuilder,

    int itemCount,

  })

scrollDirection：默认滑动方向是横向的(Axis.horizontal)，当然你也可以设置为垂直方向的滑动，便于实现垂直滑动效果

PageController:滑动控制器

physics:控制物理滑动？

对应的子类有这些，NeverScrollableScrollPhysics()可以实现安卓中的 NoScrollViewPager 的效果(你懂得~)

onPageChanged：切换回调方法

itemCount：child widget 的数量

要实现 tab 切换，我用集合存储每一个页面，并在initState()中进行了初始化+添加(原谅我的命名1234-_-…).

List pages = List();

@override

void initState() {

  super.initState();

  pages.add(new HomeScreen());

  pages.add(new HomeScreen2());

  pages.add(new HomeScreen3());

  pages.add(new HomeScreen4());

}

接下来就是主页面的 UI 绘制，导航栏用默认的“脚手架”来搭建，内嵌 AppBar 实现导航栏。

切换的方法：

void _pageChange(int index) {

  setState(() {

    if (_currentIndex != index) {

      _currentIndex = index;

    }

  });

}

BottomNavigationBar 的点击事件处理：

      onTap: (int index) {

//          _pageController.animateToPage(index, duration: new Duration(seconds: 2),curve:new ElasticOutCurve(0.8));

          _pageChange(index);

        }

搞定。

详细代码请参看：https://github.com/yanftch/flutter_demo/blob/develop/lib/wanandroid/HomePage.dart