上一篇只是实现了底部导航的效果，并没有添加点击事件。今天要做的就是通过点击导航按钮实现页面跳转。
在上一个demo的基础上做一些修改即可。
1.创建下列四个dart文件，当点击相应的底部导航按钮时切换到对应的界面。
2.依次实现这四个文件中的内容。
homeScreen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text(
'Home'
),
),
);
}
}
根据不同的dart文件，替换红框中的内容。
3.在bottom_navigation_widget.dart中添加这四个文件的头文件
import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/email_screen.dart';
import 'pages/airplay_screen.dart';
4.在button中的state类里面初始化这四个页面的Widget
..add的意思相当于某个属性.add。代码中由于是list使用类..add()方法，就是list.add()。这样写的好处就是不用每次使用add方法的时候都在前面带上变量，会默认使用第一次的list属性。
5.添加body的内容为list中对应的widget，当点击bottomBar时修改currentIndex的值。
@override
Widget build(BuildContext context) {
return Scaffold(//这个组件定义了头部或者底部位置，我们只管使用这些部件
body: list[_currentIndex], //页面的body区域显示list中的某个页面。
bottomNavigationBar: BottomNavigationBar(
6.给buttomBar添加点击事件
type: BottomNavigationBarType.fixed,
onTap: (int index) { //buttomNavigationBar的点击事件，index是方法自带的
setState(() {
_currentIndex = index;
});
},
currentIndex: _currentIndex, //底部哪个正被选中
运行结果如下：
