文章介绍

之前写过一篇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{//Tab页的控制器，可以用来定义Tab标签和内容页的坐标 TabController tabcontroller; //生命周期方法插入渲染树时调用，只调用一次 @override void initState() { super.initState(); tabcontroller = new TabController( length: 3, //Tab页的个数 vsync: this //动画效果的异步处理，默认格式 ); }//生命周期方法构建Widget时调用 @override Widget build(BuildContext context) { return new Scaffold( body: new TabBarView( controller: tabcontroller, children: <Widget>[ //创建之前写好的三个页面，万物皆是Widget new FirstTab(), new SecondTab(), new ThirdTab(), ], ), bottomNavigationBar: new Material( //底部栏整体的颜色 color: Colors.blueAccent, child: new TabBar( controller: tabcontroller, tabs: <Tab>[ new Tab(text: "第一个",icon: new Icon(Icons.android)), new Tab(text: "第二个",icon: new Icon(Icons.home)), new Tab(text: "第三个",icon: new Icon(Icons.accessibility)), ], //tab被选中时的颜色，设置之后选中的时候，icon和text都会变色 labelColor: Colors.amber, //tab未被选中时的颜色，设置之后选中的时候，icon和text都会变色 unselectedLabelColor: Colors.black, ), ) ); }//组件即将销毁时调用 @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的。
然后其实我现在也只是一个小菜鸡，一些复杂的界面自己现在也实现不了，还在学习之中。后期抽空会把这三个子界面完善出来，尽量实现一些常用的东西，比如列表，界面跳转，手势，动画之类的。暂时的想法是这样。谢谢阅读，大家周末愉快~

代码地址

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17585.html