刚开始学flutter,看了许多app,home页面的内容基本上都是不可滑动的,可对于小型应用来说,首页的可滑动可以提高app体验,但是怎么让两个页面相互滑动切换呢,我想过用TabbarView + controller的方式切换,但这种切换有一个缺点,TabbarView中并没有给icon的切换,所以底部的icon如果是自定义的话,是没法进行切换的,后面甚至想着用tabController添加监听器的方式来实现,但该监听器会在切换完成之后才产生回调,这样显然是不行的。
其实还是方法没有选对,假如用bottomNavigationBar + PageView来实现呢?打字还是太累了直接贴代码吧
PageController _pageController = PageController(); //pageController初始设置已经满足了需求
int _currentIndex = 0;
final List<Widget> _Pages = [第一个页面, 第二个页面, 第三个页面];
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
physics: ClampingScrollPhysics(),
// 也可以选择BouncingScrollPhysics,如果你希望到达边界还能滚动回弹的话
controller: _pageController,
children: _Pages,
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
label: '首页',
icon: 活跃时显示的icon,
activeIcon: 不活跃时显示的icon,
),
BottomNavigationBarItem(
label: '分类',
icon: 活跃时显示的icon,
activeIcon: 不活跃时显示的icon,
),
BottomNavigationBarItem(
label: '我的',
icon: 活跃时显示的icon,
activeIcon: 不活跃时显示的icon,
),
],
onTap: (int index) {
_pageController.animateToPage(index, duration: Duration(milliseconds: 400), curve: Curves.easeInOutQuart);
//你也可以选择你想要的动画方式和时间
setState(() {
_currentIndex = index;
});
},
currentIndex: _currentIndex,
selectedLabelStyle: 活跃时的文字样式,
unselectedLabelStyle: 不活跃时的文字样式,
)
),
);
}
这种方式也不需要添加监听器(PageView监听器会持续监听每一帧,我感觉还是比较耗性能的)
最近遇到的一个小问题,记录于此