1.BottomNavigationBar?组件介绍

BottomNavigationBar?是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是

Scaffffold组件的参数。

BottomNavigationBar?常见的属性

属性名	说明
items	List?底部导航条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
fifixedColor	选中的颜色
type	BottomNavigationBarType.fifixed BottomNavigationBarType.shifting

2.BottomNavigationBar?自定义底部导航

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter App")),
      body: const Center(
        child: Text("我是一个文本"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,//选中的颜色
        iconSize: 35,//设置item的大小
        type: BottomNavigationBarType.fixed,//如果底部有4个或者4个以上,就必须设置该属性
          currentIndex: _currentIndex,//当前选中的是第几个菜单
          onTap: (v) {
            setState(() {
              _currentIndex = v;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ]),
    );
  }
}

3. 底部凸起的设定(FloatingActionButton)

FloatingActionButton简称FAB ,可以实现浮动按钮，也可以实现类似闲鱼app的底部凸起导航

属性名称?	属性值
child	子视图，一般为Icon，不推荐使用文字
tooltip	FAB被长按时显示，也是无障碍功能
backgroundColor	背景颜色
elevation	未点击的时候的阴影
hignlightElevation	点击时阴影值，默认12.0
onPressed	点击事件回调
shape	可以定义FAB的形状等
mini	是否是mini类型默认false

代码实例:

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter App")),
      body: const Center(
        child: Text("我是一个文本"),
      ),
      bottomNavigationBar: BottomNavigationBar(
          fixedColor: Colors.red, //选中的颜色
          iconSize: 35, //设置item的大小
          type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上,就必须设置该属性
          currentIndex: _currentIndex, //当前选中的是第几个菜单
          onTap: (v) {
            setState(() {
              _currentIndex = v;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
            BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户"),
          ]),
      floatingActionButton: Container(
        height: 60, //因为需要设置大小,所以需要在外层增加Container组件
        width: 60,
        margin: EdgeInsets.only(top: 20), //设置悬浮按钮往下移动,遮盖之前的默认按键.
        child: FloatingActionButton(
          backgroundColor: _currentIndex==2?Colors.red:Colors.blue,
            child: Icon(Icons.add),
            onPressed: () {
              setState(() {
                _currentIndex = 2;
              });
            }),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}