實現效果：
ezgif.com-gif-maker.gif
實現方式，在pubspec.yaml里面添加依賴
依賴鏈接：https://pub.dev/packages/link_scroll_menu#1stringlist
link_scroll_menu: ^0.0.5
具體代碼調用：
List<Color> colorList = [
Color(0xFF969AF9),
Color(0xFF53CFA1),
Color(0xFFFF9E59),
Color(0xFFFF99CB),
Color(0xFF80D0FF),
];
List<String> 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<CCMenuPageState> menuState = GlobalKey<CCMenuPageState>();
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,),
),
)
