【Flutter】基础组件【08】BottomNavigationBar

1. 写在前面

在上篇文章中介绍了Flutter中的Appbar组件，今天继续学习【Flutter】基础组件中的BottomNavigationBar组件。

【基础语法合集】

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗？

[基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Icon

【Flutter】基础组件【06】Image

【Flutter】基础组件【07】Appbar

2. BottomNavigationBar

2. 1 BottomNavigationBar简介

BottomNavigationBar是属于 Scaffold 中的一个位于底部的控件，这和我们 iOS 中的 tabbar 很像，可以切换不同的模块。BottomNavigationBar通常是和 BottomNavigationBarItem 配合一起使用的。

我们还是以微信的框架作为例子，现在让我们去一起实现一下吧！

void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return const MaterialApp(home:  MyHomePage(),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key}) : super(key: key);@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int  _currentIndex = 1;@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text("微信"),),bottomNavigationBar: BottomNavigationBar(currentIndex: _currentIndex,//BottomNavigationBar 的点击事件onTap: (flag) {print("flag = $flag");setState(() {_currentIndex = flag;});},fixedColor: Colors.green,type: BottomNavigationBarType.fixed,items: [BottomNavigationBarItem(icon: Image.asset('images/tabbar_chat.png',height: 20,width: 20,),activeIcon: Image.asset('images/tabbar_chat_hl.png',height: 20,width: 20,),label: ('微信'),),const BottomNavigationBarItem(icon: Icon(Icons.bookmark), label: ('通讯录')),const BottomNavigationBarItem(icon: Icon(Icons.history), label: ('发现')),const BottomNavigationBarItem(icon: Icon(Icons.person_outline), label: ('我')),],));}}

我这里是工程里面导入了图片，如果你没有图片，可以使用系统的图标也是可以的，反正就是一个 demo随便弄个图标表达一下意思。不知道到怎么设置图片的看这里