android tab pageview,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);

}

搞定。