1. 基本介绍
TabBar、TabBarView，TabController 提供了常见的多Tab切换的功能。本文接着 Flutter 组件之 TabBar 详解继续讲解。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. 属性介绍
| TabBarView属性 | 介绍 |
|---|---|
| children | 子页面，注意保持 TabBarView.children 数量、DefaultTabController.length， TabBar.tabs 三者数量相同。 |
| controller | TabController，联动控制，下文中自行感受一下，可以关掉 TabBar 或者 TabBarView 的 controller 属性感受一下。 |
| physics | 滑动效果，如滑动到末端时，继续拉动，使用 ClampingScrollPhysics 实现Android下微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。 |
| dragStartBehavior | 启动时阻尼效果，默认为 DragStartBehavior.start |
4. TabBarView 组件
4.1 容器创建
优雅的编程，首先创建一个 tabbarview.dart 文件。先直接创建一个 TabBar 组件，Flutter 组件之 TabBar 详解 已经介绍的很详细了，不多叙述。
import 'package:flutter/material.dart';
class FMTabbarViewVC extends StatefulWidget {
@override
FMTabbarViewState createState() => FMTabbarViewState();
}
class FMTabbarViewState extends State {
var pageDatas = [];
TabController controller;
@override
void initState(){
super.initState();
initData();
controller = TabController(length: pageDatas.length, vsync: ScrollableState());
}
void initData(){
pageDatas.add({"title":"一年级英语", "content":["我是一年级英语一班", "我是一年级英语二班","我是一年级英语三班"]});
pageDatas.add({"title":"二年级英语", "content":["我是二年级英语一班", "我是二年级英语二班","我是二年级英语三班"]});
pageDatas.add({"title":"三年级英语", "content":["我是三年级英语一班", "我是三年级英语二班","我是三年级英语三班"]});
pageDatas.add({"title":"四年级英语", "content":["我是四年级英语一班", "我是四年级英语二班","我是四年级英语三班"]});
pageDatas.add({"title":"五年级英语", "content":["我是五年级英语一班", "我是五年级英语二班","我是五年级英语三班"]});
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: pageDatas.length,
child: Scaffold(
appBar: AppBar(
title: Text('TabBar'),
bottom: _tabBar(),
),
body: Container(
color: Colors.grey,
),
),
);
}
TabBar _tabBar(){
return TabBar(
tabs: _tabs(),
isScrollable: true,
indicatorColor: Colors.red,
indicatorWeight: 5,
controller: controller,
onTap: (index){
print("点击了 index = ${index}");
},
);
}
List _tabs(){
List tabList = [];
pageDatas.forEach((page) {
tabList.add(
Tab(text: page["title"],),
);
});
print(tabList);
return tabList;
}
}
tabbar.png
4.2 创建 TabBarView
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: pageDatas.length,
child: Scaffold(
appBar: AppBar(
title: Text('TabBar'),
bottom: _tabBar(),
),
body: _tabBarView(),
),
);
}
TabBarView _tabBarView(){
return TabBarView(
children: _tabViews(),
controller: controller,
);
}
List _tabViews(){
List tabViewList = [];
pageDatas.forEach((page) {
var contents = page["content"];
tabViewList.add(
ListView(
children: _listViewChildren(contents),
),
);
});
print(tabViewList);
return tabViewList;
}
List _listViewChildren(List contents){
List children = [];
contents.forEach((content) {
children.add(
ListTile(title: Text("${content}"),)
);
});
return children;
}
到这里其实一个联动的自定义数据的 tabBarView 已经完成了。
tabbarview one.png
tabbarview three.png
4.3 physics
使用 physics 完成一些物理效果，使用 ClampingScrollPhysics 实现Android下微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。
TabBarView _tabBarView(){
return TabBarView(
children: _tabViews(),
physics: BouncingScrollPhysics(
),
controller: controller,
);
}
这里就不截图了，建议滑到最后一页继续滑动感受一下。
4.4 dragStartBehavior
启动阻尼，默认为 DragStartBehavior.start，还有个 DragStartBehavior.down，编译后自行体验效果吧。
TabBarView _tabBarView(){
return TabBarView(
children: _tabViews(),
physics: BouncingScrollPhysics(
),
dragStartBehavior: DragStartBehavior.down,
controller: controller,
);
}
4.5 常见报错
Controller's length property (5) does not match the number of tabs (1) present in TabBar's tabs property.
tabbarview error.png
注意：当 TabBarView.children 数量与 Tabs 数量不同时，会报错。注意保持 TabBarView.children 数量、DefaultTabController.length， TabBar.tabs 三者数量相同。
5. 技术小结
- TabBarView 的属性较少。
- TabBarView.children 数量、DefaultTabController.length， TabBar.tabs 三者数量必须相同。
- TabBarView 可以理解为一个特殊的容器，主要的还是子控件的布局，可以使用任意组件。
- 使用好 TabController 控制联动效果。