如标题所示,使用这俩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<Widget> pages = List<Widget>();
@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