摘要：
比如，我们可以在tab切换时加载不同数据；可以自定义切换动画等。参数详解animation官方：一个动画，其值表示TabBar所选选项卡指示器的当前位置以及TabBar和TabBarView的scrollOffsets。index当前tab索引，//跳转后执行indexIsChanging动画是时为truelengthtab总数offset动画的值和索引之间的差异。
一、Flutter AppBar 自定义顶部按钮图标、颜色
leading 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
title 标题，通常显示为当前界面的标题文字，可以放组件
actions通常使用 IconButton 来表示，可以放按钮组
bottom通常放 tabBar，标题下面显示一个 Tab 导航栏
backgroundColor导航背景颜色
iconTheme图标样式
textTheme文字样式
centerTitle标题是否居中显示
二、Flutter AppBar 中自定义 TabBar 实现顶部 Tab 切换
tabs显示的标签内容，一般使用 Tab 对象,也可以是其他的 Widget
controllerTabController 对象
isScrollable是否可滚动
indicatorColor指示器颜色
indicatorWeight指示器高度
indicatorPadding底部指示器的 Padding
indicator指示器 decoration，例如边框等
indicatorSize指示器大小计算方式，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
labelColor选中 label 颜色
labelStyle选中 label 的 Style
labelPadding每个 label 的 padding 值
unselectedLabelColor未选中 label 颜色
unselectedLabelStyle 未选中 label 的 Style
案例代码
import 'package:flutter/material.dart';
class ClassIf extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Row( // 或者buttom
children: <Widget>[
Expanded(
flex: 1,
child: TabBar(
tabs: <Widget>[
Tab(text: '分类一'),
Tab(text: '分类二')
],
),
)
],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
Text('132'),
Text('132'),
Text('132'),
],
),
ListView(
children: <Widget>[
Text('132'),
Text('132'),
Text('132'),
],
)
],
),
),
);
}
}
三、Flutter AppBar 中自定义 TabBar 实现 Tabs 的另一种方法 带数据,带下拉更多的时候
通过TabController 定义TabBar
页面必须继承StatefulWidget
页面必须实现SingleTickerProviderStateMixin
页面初始化时，实例化TabController
在TabBar组件中指定controller为我们实例化的TabController
在TabBarView组件中指定controller为我们实例化的TabController
主要是监听TabBar与TabBarView的交互。比如，我们可以在tab切换时加载不同数据；可以自定义切换动画等。
参数详解
animation 官方：一个动画，其值表示TabBar所选选项卡指示器的当前位置以及TabBar和TabBarView的scrollOffsets。
index 当前tab索引，//跳转后执行
indexIsChanging 动画是时为true
length tab总数
offset 动画的值和索引之间的差异。偏移量必须在-1.0和1.0之间
previousIndex 前tab索引，////跳转后执行
方法详解
animateTo 从当前tab跳到目标tab并执行动画
dispose 销毁
addListener 添加监听
noSuchMethod 当访问不存在的属性或方法时调用（不知道是什么鬼）
notifyListeners 调用所有监听器
removeListener 清除监听器
import 'package:flutter/material.dart';
class AppBardemoPage extends StatefulWidget {
AppBardemoPage({Key key}) : super(key: key);
_AppBardemoPageState createState() => _AppBardemoPageState();
}
class _AppBardemoPageState extends State<AppBardemoPage> with SingleTickerProviderStateMixin {
TabController _tabController;
@override void dispose() {
_tabController.dispose();
super.dispose();
}
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this, initialIndex: 0);
_tabController.addListener(() {
print(_tabController.index);
});}
@override Widget build(BuildContext context) {
return new Scaffold(appBar: new AppBar(
title: new Text('顶部 tab 切换'),
bottom: new TabBar(tabs: <Widget>[
new Tab(icon: new Icon(Icons.directions_bike),),
new Tab(icon: new Icon(Icons.directions_boat),),
new Tab(icon: new Icon(Icons.directions_bus),),
], controller: _tabController,),),
body: new TabBarView(controller: _tabController,
children: <Widget>[
new Center(child: new Text('自行车')),
new Center(child: new Text('船')),
new Center(child: new Text('巴士')),
],),);
}
}
自定义tabBar 不放在appBar里面
class TransactionRecord extends StatefulWidget{
createState() => _TransactionRecord();
}
class _TransactionRecord extends State with SingleTickerProviderStateMixin{
var _tabController;
@override
initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this, initialIndex: 0);
_tabController.addListener(() {
print(_tabController.index);
});
}
dispose() {
super.dispose();
_tabController.dispose();
}
Widget build(BuildContext context) {
Screen.init(context);
// TODO: implement build
return DefaultTabController(
length: 3,
child: Scaffold(
body: Container(
alignment: Alignment.centerLeft,
color: ColorGather.colorBg(),
child: Column(
children: <Widget>[
Container(
height: 50, color: Colors.white,
child: TabBar(
labelPadding: EdgeInsets.all(0),
controller: _tabController,
tabs: <Widget>[
Tab(child: Text('时间筛选', style: TextStyle(fontSize: Screen.width(28)))),
Tab(child: Text('时间筛选', style: TextStyle(fontSize: Screen.width(28)))),
Tab(child: Text('时间筛选', style: TextStyle(fontSize: Screen.width(28)))),
],
onTap: (val) {},
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
Text('123'),
Text('123'),
Text('123'),
],
),
)
],
)
)
),
);
}
}
// 不确定数量DefaultTabController(
length: titleList.length,
child:
)