flutter BottomAppBar实现不规则底部导航栏

本文实例为大家分享了flutter实现不规则底部导航栏的具体代码，供大家参考，具体内容如下

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

• tabbar + tabbarview
• bottomnavigationbar + bottomnavigationbaritem
• 自定义 bottomappbar

在这里 使用 bottomappbar 来实现

/**
 * 有状态statefulwidget
 * 继承于 statefulwidget，通过 state 的 build 方法去构建控件
 */
class botomemenumbarpage extends statefulwidget {
 ////通过构造方法传值
 botomemenumbarpage();

 //主要是负责创建state
 @override
 botomemenumbarpagestate createstate() => botomemenumbarpagestate();
}

/**
 * 在 state 中,可以动态改变数据
 * 在 setstate 之后，改变的数据会触发 widget 重新构建刷新
 */
class botomemenumbarpagestate extends state<botomemenumbarpage> {
 botomemenumbarpagestate();

 @override
 void initstate() {
  ///初始化，这个函数在生命周期中只调用一次
  super.initstate();
 }

 @override
 widget build(buildcontext context) {
  //构建页面
  return buildbottomtabscaffold();
 }

 //当前显示页面的
 int currentindex = 0;
 //点击导航项是要显示的页面
 final pages = [
  childitemview("首页"),
  childitemview("发现"),
  childitemview("动态"),
  childitemview("我的")
 ];

 widget buildbottomtabscaffold() {
  return sizedbox(
    height: 100,
    child: scaffold(
     //对应的页面
     body: pages[currentindex],
     //appbar: appbar(title: const text('bottom app bar')),
     //悬浮按钮的位置
     floatingactionbuttonlocation:
       floatingactionbuttonlocation.centerdocked,
     //悬浮按钮
     floatingactionbutton: floatingactionbutton(
      child: const icon(icons.add),
      onpressed: () {
       print("add press ");
      },
     ),
     //其他菜单栏
     bottomnavigationbar: bottomappbar(
      //悬浮按钮 与其他菜单栏的结合方式
      shape: circularnotchedrectangle(),
      // floatingactionbutton和bottomappbar 之间的差距
      notchmargin: 6.0,
      color: colors.white,
      child: row(
       mainaxissize: mainaxissize.max,
       mainaxisalignment: mainaxisalignment.spacearound,
       children: <widget>[
        buildbotomitem(currentindex, 0, icons.home, "首页"),
        buildbotomitem(currentindex, 1, icons.library_music, "发现"),
        buildbotomitem(currentindex, -1, null, "发现"),
        buildbotomitem(currentindex, 2, icons.email, "消息"),
        buildbotomitem(currentindex, 3, icons.person, "我的"),
       ],
      ),
     ),
    ));
 }
 

// ignore: slash_for_doc_comments
 /**
  * @param selectindex 当前选中的页面
  * @param index 每个条目对应的角标
  * @param icondata 每个条目对就的图标
  * @param title 每个条目对应的标题
  */
 buildbotomitem(int selectindex, int index, icondata icondata, string title) {
  //未选中状态的样式
  textstyle textstyle = textstyle(fontsize: 12.0,color: colors.grey);
  materialcolor iconcolor = colors.grey;
  double iconsize=20;
  edgeinsetsgeometry padding = edgeinsets.only(top: 8.0);

  if(selectindex==index){
   //选中状态的文字样式
   textstyle = textstyle(fontsize: 13.0,color: colors.blue);
   //选中状态的按钮样式
   iconcolor = colors.blue;
   iconsize=25;
   padding = edgeinsets.only(top: 6.0);
  }
  widget paditem = sizedbox();
  if (icondata != null) {
   paditem = padding(
    padding: padding,
    child: container(
     color: colors.white,
     child: center(
      child: column(
       children: <widget>[
        icon(
         icondata,
         color: iconcolor,
         size: iconsize,
        ),
        text(
         title,
         style: textstyle,
        )
       ],
      ),
     ),
    ),
   );
  }
  widget item = expanded(
   flex: 1,
   child: new gesturedetector(
    ontap: () {
     if (index != currentindex) {
      setstate(() {
       currentindex = index;
      });
     }
    },
    child: sizedbox(
     height: 52,
     child: paditem,
    ),
   ),
  );
  return item;
 }
}

//子页面
class childitemview extends statefulwidget {
 string _title;

 childitemview(this._title);

 @override
 _childitemviewstate createstate() => _childitemviewstate();
}

class _childitemviewstate extends state<childitemview> {
 @override
 widget build(buildcontext context) {
  return container(
   child: center(child: text(widget._title)),
  );
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。