核心代码实现
1. 自定义导航栏组件
首先，我们创建一个自定义的底部导航栏组件CustomBottomNavBar。这个组件完全由我们自己绘制，可以灵活控制每个细节。
classCustomBottomNavBarextendsStatelessWidget{finalint currentIndex;finalFunction(int)onTap;constCustomBottomNavBar({super.key,requiredthis.currentIndex,requiredthis.onTap,});@overrideWidgetbuild(BuildContextcontext){returnContainer(decoration:BoxDecoration(color:Colors.white,boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.1),blurRadius:20,offset:constOffset(0,-5),),],),child:SafeArea(child:Container(height:65,padding:constEdgeInsets.symmetric(horizontal:8,vertical:8),child:Row(mainAxisAlignment:MainAxisAlignment.spaceAround,children:[_NavBarItem(icon:Icons.home_outlined,selectedIcon:Icons.home,label:'首页',isSelected:currentIndex==0,onTap:()=>onTap(0),),_NavBarItem(icon:Icons.explore_outlined,selectedIcon:Icons.explore,label:'发现',isSelected:currentIndex==1,onTap:()=>onTap(1),),_NavBarItem(icon:Icons.message_outlined,selectedIcon:Icons.message,label:'消息',isSelected:currentIndex==2,onTap:()=>onTap(2),),_NavBarItem(icon:Icons.person_outlined,selectedIcon:Icons.person,label:'我的',isSelected:currentIndex==3,onTap:()=>onTap(3),),],),),),);}}
