flutter Pageview配合bottomNavigationBar的首页切换

902 阅读1分钟

刚开始学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监听器会持续监听每一帧,我感觉还是比较耗性能的)

最近遇到的一个小问题,记录于此