我们日常使用的社交，金融，办公等手机应用中，大多数都使用到了导航功能。应用的导航功能不仅可以让我们快速了解一个应用的主要功能，也方便在不同功能之间进行快速切换。举几个常见应用导航的例子：
腾讯微信：
银行应用:
阿里钉钉
接下来，我们就在上一篇文章的基础上，为我们的 hello_world 项目增加应用导航功能。虽然这只是一个学习型项目，应用导航会让我们的学习更加专业。
启动 Android Studio，打开 hello_world 项目，运行模拟器，这样就可以实时看到编码产生的效果。现在，我们只能看到空白的页面。
添加底部导航
- 打开
main.dart文件，找到下列代码，
body: SafeArea(
child: Container(),
),
- 在上述代码块下面，添加如下代码并保存：
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.lightBlue,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.list),
label: '列表',
),
BottomNavigationBarItem(
icon: Icon(Icons.widgets),
label: '部件',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: '设置',
),
],
),
观察虚拟机，就会发现，应用导航条出现在了页面的底部。
现在，如果你尝试点击其他两个导航图标，会发现没有任何反应，他们不会被选中。
接下来，我们就解决这个问题。
设置导航索引
- 为了让应用导航发挥作用，我们需要记录用户点击的导航项（图标）。
在 main.dart 文件中，找到 _HomePageState 类，在其中找到下列代码：
class _HomePageState extends State<HomePage> {
在这行代码的下面，添加如下代码：
int _selectedIndex = 0;
变量前面的下划线
_表示_selectedIndex是一个私有变量，这是 Dart 语言的一个特征。
- 继续在
_HomePageState类中，找下列代码：
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.lightBlue,
在这两行代码下面，添加如下代码：
currentIndex: _selectedIndex,
这样，我们就把应用导航的当前选择项的索引与变量 _selectedIndex 关联在一起。可以通过变量 _selectedIndex 获取或设置应用导航的选择项。
- 在上一步添加的代码
currentIndex: _selectedIndex,下面，添加如下代码：
onTap: (index) =>
setState(() {
_selectedIndex = index;
}),
这段代码是用户在点击应用导航图标时执行。其中，传入参数 index 表示用户所点击图标对应的导航项索引，赋值给 变量 _selectedIndex 进行保存。
这里需要强调的是，赋值语句是放到 setState 函数中执行的，起作用是告诉 Flutter 框架，应用导航的状态发生了变化，需要重新渲染界面。这也是为什么，我们在刚添加完应用导航，点击其他图标，没有被选中的原因。
现在试试点击其他两个图标，就会发现他们已经可以被选中了。
选中部件导航项。
选中设置导航项。
提交代码
我们已经完成了应用底部导航栏的添加，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。
git add .
git commit -m '添加应用底部导航栏。'
