flutter 实现顶部菜单跟页面联合滚动效果

实现效果：

ezgif.com-gif-maker.gif

实现方式，在pubspec.yaml里面添加依赖

依赖链接：https://pub.dev/packages/link_scroll_menu#1stringlist

link_scroll_menu: ^0.0.5

具体代码调用：

List colorList = [
    Color(0xFF969AF9),
    Color(0xFF53CFA1),
    Color(0xFFFF9E59),
    Color(0xFFFF99CB),
    Color(0xFF80D0FF),
  ];
  List menuList = ['关注','推荐','热榜','抗疫','视频','小视频','直播','娱乐','新闻'];

1、默认顶部菜单样式，此样式只能传string类型的list

return CCMenuPage(
        menuList: menuList,
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

2、可以设置顶部菜单样式，文字颜色、大小、下划线颜色等，此样式只能传string类型的list

return CCMenuPage.custom(
        menuList: menuList,
        tabHeight: 60,
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

3、可以自定义顶部菜单样式

return CCMenuPage.builder(
        itemCount: menuList.length,
        tabBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: 60,
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 Container(
                   width: 30,
                   height: 30,
                   margin: EdgeInsets.only(
                     bottom: 10,
                     top: 10
                   ),
                   color: Colors.amber,
                 ),
                 Text(
                   menuList[index],style: TextStyle(fontSize: 18),
                 )
               ],
             ),
          );
        },
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

4、可以在滚动页面添加头部和底部，不会影响菜单选中

return CCMenuPage.custom(
        menuList: menuList,
        tabHeight: 60,
        headerWidget: Container(
          alignment: Alignment.center,
          height: 200,
          color: Colors.black38,
          child: Text('这是头部',style: TextStyle(fontSize: 20),),
        ),
        bottomWidget: Container(
          alignment: Alignment.center,
          height: 200,
          color: Colors.black38,
          child: Text('这是底部',style: TextStyle(fontSize: 20),),
        ),
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

5、动态实现菜单个数

GlobalKey menuState = GlobalKey();

return CCMenuPage.custom(
        key: menuState,
        menuList: menuList,
        tabHeight: 60,
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

点击添加菜单按钮：

      GestureDetector(
             onTap: (){
              menuList.add('新增菜单');
              menuState.currentState.updateMenu();
              setState(() {

              });
             },
             child: Container(
               width: 50,
               child: Icon(Icons.add,color: Colors.white,),
             ),
           )