文章介绍
之前写过一篇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的。然后其实我现在也只是一个小菜鸡，一些复杂的界面自己现在也实现不了，还在学习之中。后期抽空会把这三个子界面完善出来，尽量实现一些常用的东西，比如列表，界面跳转，手势，动画之类的。暂时的想法是这样。谢谢阅读，大家周末愉快~
网友评论