2分钟
03 Tabbar控件实现-1
Tabbar 页面是常有需求，而在Flutter中： Scaffold + AppBar + Tabbar + TabbarView 是 Tabbar 页面的最简单实现，但在加上 AutomaticKeepAliveClientMixin 用于页面 keepAlive 之后，早期诸如#11895的问题便开始成为Crash的元凶，直到 flutter v0.5.7 sdk 版本修复后，问题依旧没有完全解决，所以无奈最终修改了实现方案。（1.9.1 stable 中已经修复）
目前笔者是通过 Scaffold + Appbar + Tabbar + PageView 来组合实现效果，从而解决上述问题。下面我们直接代码走起，首先作为一个Tabbar Widget，它肯定是一个 StatefulWidget ，所以我们先实现它的 State：
class _GSYTabBarState extends State<GSYTabBarWidget> with SingleTickerProviderStateMixin {
///···省略非关键代码
@override
void initState() {
super.initState();
///初始化时创建控制器
///通过 with SingleTickerProviderStateMixin 实现动画效果。
_tabController = new TabController(vsync: this, length: _tabItems.length);
}
@override
void dispose() {
///页面销毁时，销毁控制器
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
///底部TAbBar模式
return new Scaffold(
///设置侧边滑出 drawer，不需要可以不设置
drawer: _drawer,
///设置悬浮按键，不需要可以不设置
floatingActionButton: _floatingActionButton,
///标题栏
appBar: new AppBar(
backgroundColor: _backgroundColor,
title: _title,
),
///页面主体，PageView，用于承载Tab对应的页面
body: new PageView(
///必须有的控制器，与tabBar的控制器同步
controller: _pageController,
///每一个 tab 对应的页面主体，是一个List<Widget>
children: _tabViews,
onPageChanged: (index) {
///页面触摸作用滑动回调，用于同步tab选中状态
_tabController.animateTo(index);
},
),
///底部导航栏，也就是tab栏
bottomNavigationBar: new Material(
color: _backgroundColor,
///tabBar控件
child: new TabBar(
///必须有的控制器，与pageView的控制器同步
controller: _tabController,
///每一个tab item，是一个List<Widget>
tabs: _tabItems,
///tab底部选中条颜色
indicatorColor: _indicatorColor,
),
));
}
}如上代码所示，这是一个 底部 TabBar 的页面的效果。TabBar 和 PageView 之间通过 _pageController 和 _tabController 实现 Tab 和页面的同步，通过 SingleTickerProviderStateMixin实现 Tab 的动画切换效果 (ps 如果有需要多个嵌套动画效果，你可能需要TickerProviderStateMixin)，从代码中我们可以看到：
- 手动左右滑动
PageView时，通过onPageChanged回调调用_tabController.animateTo(index);同步TabBar状态。 - _tabItems 中，监听每个 TabBarItem 的点击，通过
_pageController实现PageView的状态同步。
而上面代码还缺少了 TabBarItem 的点击，因为这块被放到了外部实现。当然你也可以直接在内部封装好控件，直接传递配置数据显示，这个可以根据个人需要封装。
学员评价