（Flutter 十一）底部导航的实现（二）

上一篇只是实现了底部导航的效果，并没有添加点击事件。今天要做的就是通过点击导航按钮实现页面跳转。

在上一个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, //底部哪个正被选中

运行结果如下：