Flutter之BottomAppBar组件

实现底部导航栏并点击切换页面可简述为有三种方式
TabBar + TabBarView
BottomNavigationBar + BottomNavigationBarItem，实现规则的底部导航栏
自定义 BottomAppBar，实现不规则底部导航栏

const BottomAppBar({
    Key? key,
    this.color,//背景色
    this.elevation,//阴影效果
    this.shape,//设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形
    this.clipBehavior = Clip.none,
    this.notchMargin = 4.0,//FloatingActionButton和BottomAppBar之间的距离。
    this.child,
  })

bottomNavigationBar: BottomAppBar(
          //设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，
          //所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
          shape: CircularNotchedRectangle(),
          color: Colors.white,
          child: Container(
            height: 49,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  flex: 1,
                  child: InkWell(
                    child: Image.asset(
                      index == 0 ? "images/custome_icon_home_select.png" : "images/custome_icon_home.png",
                      width: 42,
                      height: 42,
                    ),
                    onTap: () {
                      if (index != 0) {
                        setState(() {
                          index = 0;
                        });
                      }
                    },
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(),
                ),
                Expanded(
                  flex: 1,
                  child: InkWell(
                    child: Image.asset(
                      index == 1 ? "images/custome_icon_gerenzhongxin_select.png" : "images/custome_icon_gerenzhongxin.png",
                      width: 42,
                      height: 42,
                    ),
                    onTap: () {
                      if (index != 1) {
                        setState(() {
                          index = 1;
                        });
                      }
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: MyFloatingActionButton(),