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

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: 2),
//                curve: new ElasticOutCurve(0.8));
//            _pageChange(index);
            _pagerControler.jumpToPage(index);
            setState(() {
              _selectedIndex=index;
            });
          },
          items:[
            BottomNavigationBarItem(
                icon: Image.asset(_selectedIndex==0?itemNames[0].activeIcon:itemNames[0].normalIcon,width: 24,height: 24,),
                title: Text(itemNames[0].name,style: TextStyle(color: Colors.black),)
            ),
            BottomNavigationBarItem(
                icon: Image.asset(_selectedIndex==1?itemNames[1].activeIcon:itemNames[1].normalIcon,width: 24,height: 24,),
              title: Text(itemNames[1].name,style: TextStyle(color: Colors.black),)
            ),
            BottomNavigationBarItem(icon:  Image.asset(_selectedIndex==2?itemNames[2].activeIcon:itemNames[2].normalIcon,width:24,height:24)
              ,title: Text(itemNames[2].name,style: TextStyle(color: Colors.black),)
            ),BottomNavigationBarItem(
                icon: Image.asset(_selectedIndex==3?itemNames[3].activeIcon:itemNames[3].normalIcon,width: 24,height: 24,),
                title: Text(itemNames[3].name,style: TextStyle(color: Colors.black),)
            ),
            BottomNavigationBarItem(icon:  Image.asset(_selectedIndex==4?itemNames[4].activeIcon:itemNames[4].normalIcon,width:24,height:24)
                ,title: Text(itemNames[4].name,style: TextStyle(color: Colors.black),)
            )

          ]),
    );

  }

2.分步：

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: _pagerview();
      bottomNavigationBar: _bottomnavigation();
      );
  }

2.1 NavigationBar
主要实现三点：
currentIndex: _selectedIndex,
onTap: (index){}
items:[];

BottomNavigationBar buildBottomNavigation() {
    return BottomNavigationBar(
        //当前显示的子位置
        currentIndex: _selectedIndex,
        //底部导航栏的展示类型 fixed 导航栏固定  shifting 浮动
        type: BottomNavigationBarType.fixed,
        //ontap 底部按钮点击事件
        onTap: (index){
          // 切换时没有动画效果
//          _pageController.jumpToPage(index);
          // 切换时添加动画效果
//            _pagerControler.animateToPage(index,
//                duration: new Duration(seconds: 2),
//                curve: new ElasticOutCurve(0.8));
          //点击bottomNavigationbar 奇幻pagerview
          _pagerControler.jumpToPage(index);
          setState(() {
            //点击切换bottomNavigationbar
            _selectedIndex=index;
          });
        },
        //BottomNavigationBarItem 子item选项
        items:[
          BottomNavigationBarItem(
              icon: Image.asset(_selectedIndex==0?itemNames[0].activeIcon:itemNames[0].normalIcon,width: 24,height: 24,),
              title: Text(itemNames[0].name,style: TextStyle(color: Colors.black),)
          ),
          BottomNavigationBarItem(
              icon: Image.asset(_selectedIndex==1?itemNames[1].activeIcon:itemNames[1].normalIcon,width: 24,height: 24,),
            title: Text(itemNames[1].name,style: TextStyle(color: Colors.black),)
          ),
          BottomNavigationBarItem(icon:  Image.asset(_selectedIndex==2?itemNames[2].activeIcon:itemNames[2].normalIcon,width:24,height:24)
            ,title: Text(itemNames[2].name,style: TextStyle(color: Colors.black),)
          ),BottomNavigationBarItem(
              icon: Image.asset(_selectedIndex==3?itemNames[3].activeIcon:itemNames[3].normalIcon,width: 24,height: 24,),
              title: Text(itemNames[3].name,style: TextStyle(color: Colors.black),)
          ),
          BottomNavigationBarItem(icon:  Image.asset(_selectedIndex==4?itemNames[4].activeIcon:itemNames[4].normalIcon,width:24,height:24)
              ,title: Text(itemNames[4].name,style: TextStyle(color: Colors.black),)
          )

        ]);
  }

2.2 pagerview
主要实现四点：
onpagechanged:(index){};
controller:_pagerControler()
itemCount: listPager.length,
itemBuilder: (BuildContext context,int index){}

_pagerControler=PageController(initialPage: _selectedIndex);

PageView buildPageView() {
    return PageView.builder(
        //pagerview 切换监听
        onPageChanged: (index){
          setState(() {
            //改变底部按钮显示
            _selectedIndex=index;
          });
        },
        //控制器
        controller: _pagerControler,
        //pagerview 数量
        itemCount: listPager.length,
        // ignore: missing_return
        //展示pagerview
        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];
           }
        }
    );
  }