flutter demo系列一 bottomnavigationbar pagerview 底部导航栏滑动切换

fatkang

于 2019-08-01 11:23:58 发布

阅读量779

点赞数 1

分类专栏：学习记录文章标签： flutter bottomnavigationbar pagervi 首页导航切换

本文链接：https://blog.youkuaiyun.com/qq_36187935/article/details/98038634

版权

本文介绍了如何在Flutter应用中使用BottomNavigationBar和PageView结合，实现底部导航栏滑动切换页面的功能。通过设置currentIndex、onTap回调及PageController，详细阐述了导航栏和页面切换的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter app练习系列1 bottomnavigationbar 底部导航栏切换
pagerview 配合bottomnavigationbar 实现页面切换导航
1.主体代码

 Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: PageView.builder(
          onPageChanged: (index){
            setState(() {
              _selectedIndex=index;
            });
          },
          controller: _pagerControler,
          itemCount: listPager.length,
          // ignore: missing_return
          itemBuilder: (BuildContext context,int index){
             if(index==0){
               return listPager[0];
             }else if(index==1){
               return listPager[1];
             }else if(index==2){
               return listPager[2];
             }else if(index==3){
               return listPager[3];
             }else if(index==4){
               return listPager[4];
             }
          }
      ),
      bottomNavigationBar: BottomNavigationBar(

          currentIndex: _selectedIndex,
          type: BottomNavigationBarType.fixed,
          onTap: (index){
            // 切换时没有动画效果
//          _pageController.jumpToPage(index);
            // 切换时添加动画效果
//            _pagerControler.animateToPage(index,
//                duration: new Duration(seconds

最低0.47元/天解锁文章