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: [], )), ); } }