怎么在颤振中利用BottomAppBar实现不规则底部导航栏 - 行业资讯

　　介绍

今天就跟大家聊聊有关怎么在颤振中利用BottomAppBar实现不规则底部导航栏,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

实现底部导航栏并点击切换页面可简述为有三种方式

<李>

TabBar + TabBarView

<李>

BottomNavigationBar + BottomNavigationBarItem

<李>

自定义BottomAppBar

在这里使用BottomAppBar来实现

怎么在颤振中利用BottomAppBar实现不规则底部导航栏”> </p> <pre类= /* * 　　,*有状态StatefulWidget 　　,*继承于,StatefulWidget,通过,State 的,build 方法去构建控件　　,*/class BotomeMenumBarPage extends StatefulWidget { 　　,////通过构造方法传值　　,BotomeMenumBarPage (); 　　　　,//主要是负责创建州　　,@override 　　,BotomeMenumBarPageState createState(),=祝辞,BotomeMenumBarPageState (); 　　}/* * 　　,*在,State 中,可以动态改变数据　　,*在,setState 之后,改变的数据会触发,Widget 重新构建刷新　　,*/class BotomeMenumBarPageState extends State< BotomeMenumBarPage>, { 　　,BotomeMenumBarPageState (); 　　　　,@override 　　,void initState (), {///才能初始化,这个函数在生命周期中只调用一次　　super.initState才能(); 　　,} 　　　　,@override 　　,Widget 构建(BuildContext 上下文),{//才能构建页面　　return 才能buildBottomTabScaffold (); 　　,} 　　　　,//当前显示页面的　　,int currentIndex =, 0; 　　,//点击导航项是要显示的页面　　,final pages =, ( 　　ChildItemView才能(“首页“), 　　ChildItemView才能(“发现“), 　　ChildItemView才能(“动态“), 　　ChildItemView才能(“我的”) 　　,); 　　　　,Widget buildBottomTabScaffold (), { 　　return SizedBox(才能　　,,,身高:,100年, 　　,,,孩子:,支架( 　　,,,,//对应的页面　　,,,,身体:,页面(currentIndex), 　　,,,,//appBar:, appBar(标题:,const 文本(& # 39;Bottom App 酒吧# 39;)), 　　,,,,//悬浮按钮的位置　　,,,,floatingActionButtonLocation: 　　,,,,,,FloatingActionButtonLocation.centerDocked, 　　,,,,//悬浮按钮　　,,,,floatingActionButton:, floatingActionButton ( 　　,,,,,孩子:,const 图标(Icons.add), 　　,,,,,onPressed:, (), { 　　,,,,,,印刷(“add press “); 　　,,,,,}, 　　,,,,), 　　,,,,//其他菜单栏　　,,,,bottomNavigationBar:, BottomAppBar ( 　　,,,,,//悬浮按钮,与其他菜单栏的结合方式　　,,,,,形状:,CircularNotchedRectangle (), 　　,,,,,//,FloatingActionButton和BottomAppBar 之间的差距　　,,,,,notchMargin:, 6.0, 　　,,,,,颜色:,Colors.white, 　　,,,,,,,行( 　　,,,,,,mainAxisSize:, MainAxisSize.max, 　　,,,,,,mainAxisAlignment:, MainAxisAlignment.spaceAround, 　　,,,,,,孩子们:,& lt; Widget> [ 　　,,,,,,,buildBotomItem (currentIndex, 0, Icons.home,,“首页“), 　　,,,,,,,buildBotomItem (currentIndex,, 1,, Icons.library_music,,“发现“), 　　,,,,,,,buildBotomItem (currentIndex,, 1,,空,,“发现“), 　　,,,,,,,buildBotomItem (currentIndex,, 2,, Icons.email,,“消息“), 　　,,,,,,,buildBotomItem (currentIndex,, 3,, Icons.person,,“我的”), 　　,,,,,,, 　　,,,,,), 　　,,,,), 　　,,,)); 　　,} 　　,//,忽略:slash_for_doc_comments/* * 　　*,才能@param selectIndex 当前选中的页面　　*,才能@param index 每个条目对应的角标　　*,才能@param iconData 每个条目对就的图标　　*,才能@param title 每个条目对应的标题　　,*/,buildBotomItem (int selectIndex, int 指数,IconData iconData,, String 标题),{//未才能选中状态的样式　　TextStyle 才能;TextStyle =, TextStyle(字形大小:12.0,颜色:,Colors.grey); 　　MaterialColor 才能;iconColor =, Colors.grey; 　　double 才能;iconSize=20; 　　EdgeInsetsGeometry 才能;padding =, EdgeInsets.only(最高:8.0); 　　　　如果才能(selectIndex==指数){ 　　,,//选中状态的文字样式　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null