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

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