21、Scaffold属性 FloatingActionButton实现类似闲鱼App底 部导航凸起按钮

FloatingActionButton详解

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

 

实现类似闲鱼App底部导航凸起按钮

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

  @override
  State<MyFlutter2> createState() => _MyFlutter2State();
}

class _MyFlutter2State extends State<MyFlutter2> {
  int _currentIndex = 2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("这是导航栏")),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex, //默认选中第几个
          type: BottomNavigationBarType.fixed,
          fixedColor: const Color.fromARGB(255, 54, 244, 171), //选中的颜色
          onTap: (index) {
            //选中变化回调函数
            print("监听$index");
            setState(() {
              _currentIndex = index;
            });
          },
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.timeline), label: "时间"),
            BottomNavigationBarItem(icon: Icon(Icons.shop), label: "购物"),
            BottomNavigationBarItem(icon: Icon(Icons.today), label: "日期"),
            BottomNavigationBarItem(
                icon: Icon(Icons.my_library_add), label: "我的"),
          ]),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, //配置浮动按钮位置
      floatingActionButton: Container(
          //浮动按钮
          height: 60, //调整FloatingActionButton 的大小
          width: 60,
          padding: const EdgeInsets.all(2),
          margin: const EdgeInsets.only(top: 4), //调整FloatingActionButton 的位置
          decoration: BoxDecoration(
              color: Color.fromARGB(171, 246, 248, 246),
              borderRadius: BorderRadius.circular(30)),
          child: FloatingActionButton(
            backgroundColor: _currentIndex == 2
                ? Color.fromARGB(255, 65, 255, 59)
                : Color.fromARGB(255, 149, 150, 149), //按钮背景颜色
            child: const Icon(Icons.add),
            onPressed: () {
              setState(() {
                _currentIndex = 2;
              });
              print("中间------按钮");
            },
          )),
      body: const Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [],
      )),
    );
  }
}