flutter实战20个小demo（01）——底部导航栏

从这篇文章开始，我准备新建一个实战合集，flutter实战20个小demo,记录自己学习这20个小实战的过程。
首先，新建一个文件夹，flutterDemo20，在这个文件夹里将会是我们这20个实战的代码。
第一个项目效果是这样的

一、创建

首先，在文件夹下创建第一个项目

flutter create demo01

二、找到主文件并修改

在main.dart中将原本的代码修改为

import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';

void main()=> runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: BottomNavigationWidget()
    );
  }
}

此时，bottom_navigation_widget.dart文件是不存在的，所以会报错。

三、编写bottom_navigation_widget.dart文件

import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color:_BottomNavigationColor),
            title: Text('Home', style:TextStyle(color: _BottomNavigationColor))
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.email, color:_BottomNavigationColor),
            title: Text('Email', style:TextStyle(color: _BottomNavigationColor))
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.pages, color:_BottomNavigationColor),
            title: Text('Pages', style:TextStyle(color: _BottomNavigationColor))
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.airplay, color:_BottomNavigationColor),
            title: Text('AirPlay', style:TextStyle(color: _BottomNavigationColor))
          ),
        ],
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

注意：type: BottomNavigationBarType.fixed,这句话一定要写上，一开始没有写这句话，排版出现了问题，文字没有完全显示出来。
给大家bug复现一下：
不加type: BottomNavigationBarType.fixed,这句话时样式是这样的

经多番排查，去掉最后一个BottomNavigationBarItem就好了，只保留三个就都显示出来了，我觉得应该是样式排版的问题，把文字挤下去了。

加上type: BottomNavigationBarType.fixed,这句话，四个icon就都可以正常显示出来了

四、根据选中的底部导航栏切换中间显示内容

1、新建四个子页面文件

里面放入简单的代码

2、在bottom_navigation_widget.dart文件里引入并使用

3、根据index判断当前显示什么页面

首先定义一个默认的index为0

然后写点击事件切换当前选中页面并赋值

最后根据index获取当前要显示的list

现在内容就可以正常显示了。

总结：
1、StatefulWidget具有可变状态(state)的窗口组件（widget）。使用这个要根据变化状态，调整State值
2、StatelessWidget快捷方式stl; StatefulWidget快捷方式stful
3、页面的bottomBar的数量要和list的数量一致
4、type:BottomNavigationBarType.fixed

最终的完整代码会放在我的github上，github的地址随后奉上哦~