前言:《Hello, Flutter》是我近期的一个写作计划。我的目标是写一篇篇简短的教程,提供给
Flutter
的初级用户,让他们能够快速掌握Flutter
开发。代码地址:https://github.com/flycash/hello_flutter
今天来实现一个简单的功能,就是Tab
切换——类似于微信下面的Tab
栏。
每一次点击下面的tab
,都会切换到不同的页面。
一般而言,实现这个功能需要三个部分:
-
TabController
; -
TabBar
; -
TabBarView
;
后两者是通过第一者来进行通信和协调的:
TabBarController
首先我们要准备一个controller
。
这里有几个地方是之前的文章没有涉及的。第一个是initState
方法。一般了来说,会将跟组件或者数据的初始化放在这里。
第二个是dispose
方法,这个方法会在元素被移除出render tree
的时候调用。简单理解就是类似于java
里面的finalize
方法,又或者是c++
里面的析构函数。
TabBar和TabBarView
因为在构造controller
的时候我们已经指定了tab
有多少个,所以这里就构造为之前指定的两个。
同样,我们也构造了两个TabBarView
。
效果如图:
基本上看不清下面的tab
,我们改一下tab
的颜色:
效果就好看多了:
总体上来说,现在实现这种tab
切换在flutter
里面真的是很简单的了。