BottomNavigationBar

void main() {
runApp(MaterialApp(home: TabsView()));
}

image.png

image.png

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

@override
State<TabsView> createState() => _TabsViewState();
}

class _TabsViewState extends State<TabsView> {
int _currentIndex = 0;
final List<Widget> _pages = [
HomeView(),
CategoryView(),
SettingView(),
MessageView(),
UserView(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//导航栏
title: Text(
"你好啊",
textAlign: .left,
style: TextStyle(fontSize: 17, color: Colors.orange),
),
backgroundColor: Colors.blue,
),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
iconSize: 35, //图标大小
currentIndex: _currentIndex,
selectedItemColor: Colors.blue,
type: BottomNavigationBarType.fixed, //底部大于3个item的时候需要配置
onTap: (index) {
setState(() {
_currentIndex = index;
});
print("点击了$index");
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.eleven_mp_rounded),
label: "首页",
),
BottomNavigationBarItem(icon: Icon(Icons.eleven_mp), label: "分类"),
BottomNavigationBarItem(
icon: Icon(Icons.eighteen_mp_sharp),
label: "设置",
),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),

      BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),
    ],
  ),
  floatingActionButton: Container(
    //那个加号
    width: 60,
    height: 60,
    margin: EdgeInsets.only(top: 20), //下移20
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(40),
    ),
    child: FloatingActionButton(
      backgroundColor: _currentIndex == 2 ? Colors.red : Colors.yellow,
      onPressed: () {
        setState(() {
          _currentIndex = 2;
        });
      },
      shape: CircleBorder(), //圆形
      child: Icon(Icons.add),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);

}
}

image.png