Flutter实现常用底部栏

文章介绍

之前写过一篇Flutter介绍的文章，然后因为一些其他事情停了好久没写了。这人一懒下来就懒成习惯了哈哈。这次的文章主要是介绍用Flutter实现一个app常用的底部tab栏，类似于安卓里面的BottomNaivigationView。有三个页面可以点击切换这样子。

项目结构

项目结构

FirstTab里面的代码：

import 'package:flutter/material.dart';

class FirstTab extends StatefulWidget {
  @override
  _FirstTabState createState() => _FirstTabState();
}

class _FirstTabState extends State<FirstTab> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第一个界面'),
      ),
      body: new Center(
        child: new Text('first'),
      ),
    );
  }
}

就是一个简单的界面，一个标题栏文本，和一个居中的文本。第二个和第三个界面也都是一样类似的，文本不同而已。这里教大家一个小技巧，在AndroidStudio里面创建Widget的快捷键。

stful ===> 创建一个StatefulWidget，并且会自动生成State，很省事
stless ===> 创建一个StatelessWidget

Widget生命周期

在把这三个界面整合到一起之前，我想先插入一点很重要的知识。在Flutter里面万物皆是Widget，所以我想先介绍一下Widget的生命周期。但是说Widget的生命周期这个说法其实是不准确的。
因为Widget分为StatefulWidget和StatelessWidget，可变的是StatefulWidget，它的可变又是通过修改State来完成的，等下在代码里面可以看到有@override标识的生命周期方法其实是在继承于State的状态类里面写的。所以说成是State的生命周期更加准确一点。

方法名称	状态
initState	插入渲染树时调用，只调用一次
didChangeDependencies	state依赖的对象发生变化时调用
didUpdateWidget	组件状态改变时候调用，可能会调用多次
build	构建Widget时调用
deactivate	当移除渲染树的时候调用
dispose	组件即将销毁时调用

完整的生命如图所有的方法和分阶段执行的图解，很详细了。图片是从闲鱼技术那里copy来的。推荐大家都关注一下闲鱼技术，他们确实在Flutter这一块有很多自己的实践文章

生命周期

主入口

现在我们把三个页面放到main.dart里面，做出一个类似BottomNaivigationView的效果。
首先在main.dart文件里面导入之前我们写好的三个tab页

import './pages/FirstTab.dart';
import './pages/SecondTab.dart';
import './pages/ThirdTab.dart';

我这里因为是已经写完了，就是使用过这三个了，字体不会是灰色带波浪线的。所以大家碰到灰色带波浪线的话也不要慌张，写完就好了。
main.dart完整代码：

import 'package:flutter/material.dart';
import './pages/FirstTab.dart';
import './pages/SecondTab.dart';
import './pages/ThirdTab.dart';

void main(){
  runApp(
    new MaterialApp(
      title:'tabdemo',
      home:new HomePage()
    )
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() =>new _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
  
  TabController tabcontroller;
  
  @override
  void initState() {
    super.initState();
    tabcontroller = new TabController(length: 3, vsync: this);
  }
  
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new TabBarView(
        controller: tabcontroller,
        children: <Widget>[
          new FirstTab(),
          new SecondTab(),
          new ThirdTab(),
        ]
      ),
      bottomNavigationBar: new Material(
        color: Colors.amber,
        child: new TabBar(
          controller: tabcontroller,
          tabs: <Tab>[
            new Tab(text: "第一个",icon: new Icon(Icons.home)),
            new Tab(text: "第二个",icon: new Icon(Icons.message)),
            new Tab(text: "第三个",icon: new Icon(Icons.cloud)),
          ]
        ),
      )
    );
  }
  
  @override
  void dispose() {
    tabcontroller.dispose();
    super.dispose();
  }
}

1.首先main方法是主入口。title里面的标题就是app在后台时显示的名字。
2.HomePage是一个有状态的组件，通过修改_HomePageState 来修改他显示内容
3._HomePageState 里面有三个方法initState，build，dispose。这三个都是生命周期方法，上面表格里面有详细描述，在这里是按照我代码里面的顺序执行的。
4.TabController相当于是tabbar的控制器，在build方法里面创建控件的时候作为参数传入
5.build方法里面先是创建了一个Scaffold，然后里面放入了控件，也就是界面显示出来的东西，类似于安卓里面的view。控件的具体用法可参考 Widget目录
6.最后在dispose组件销毁的时候销毁掉tabcontroller

补充说明

我的代码里面有很多new关键字，其实在Dart2里面这些new是可以省略掉的，但是因为我写Java写习惯了，所以为了便于大家阅读，我还是加了new的。然后其实我现在也只是一个小菜鸡，一些复杂的界面自己现在也实现不了，还在学习之中。后期抽空会把这三个子界面完善出来，尽量实现一些常用的东西，比如列表，界面跳转，手势，动画之类的。暂时的想法是这样。谢谢阅读，大家周末愉快~