TabBar、TabBarView，TabController 提供了常见的多Tab切换的功能，例如电商网站上方横划的服装、家具、电子产品... 等切换页面，然后点击对应 tab 切换到不同专场这种功能。
1. TabBar
TabBar 定义
const TabBar({
Key? key,
required this.tabs,
this.controller,
this.isScrollable = false,
this.padding,
this.indicatorColor,
this.automaticIndicatorColorAdjustment = true,
this.indicatorWeight = 2.0,
this.indicatorPadding = EdgeInsets.zero,
this.indicator,
this.indicatorSize,
this.labelColor,
this.labelStyle,
this.labelPadding,
this.unselectedLabelColor,
this.unselectedLabelStyle,
this.dragStartBehavior = DragStartBehavior.start,
this.overlayColor,
this.mouseCursor,
this.enableFeedback,
this.onTap,
this.physics,
})
TabBar属性
| TabBar属性 | 介绍 |
|---|---|
| tabs | List<Tab> |
| controller | TabController，控制联动 |
| isScrollable | Tabbar 是否可滚动，默认为false，为true时，Tabbar可水平滚动，且每个bar都包裹内容，为false时，Tabbar不可滚动，且每个tab宽度一致 |
| padding | 内间距 |
| indicatorColor | 指示器颜色 |
| automaticIndicatorColorAdjustment | 自动调整指示器颜色 |
| indicatorWeight | 指示器宽度 |
| indicatorPadding | 指示器间距 EdgeInsets.zero, |
| indicator | 自定义指示器 |
| indicatorSize | 指示器大小 TabBarIndicatorSize 默认为TabBarIndicatorSize.tab |
| labelColor | title 颜色 |
| labelStyle | title 样式 |
| labelPadding | title 间距 |
| unselectedLabelColor | 未选中 title 颜色 |
| unselectedLabelStyle | 未选中 title 样式 |
| dragStartBehavior | 拖拽设置，默认为 DragStartBehavior.start, |
| overlayColor | 高亮颜色 |
| mouseCursor | 鼠标悬停，Web可以了解 |
| enableFeedback | 是否启动点击反馈 |
| onTap | 点击事件 |
| physics | 滑动效果，如滑动到末端时，继续拉动，使用 ClampingScrollPhysics 实现Android下微光效果。使用 BouncingScrollPhysics 实现iOS下弹性效果。 |
2. 示例
TabBar、TabBarView，TabController 一般都是一起使用的
2.1 示例1
使用DefaultTabController 作为Tabbar的联动控制器
class MSTabbarDemo1 extends StatefulWidget {
const MSTabbarDemo1({Key? key}) : super(key: key);
@override
State<MSTabbarDemo1> createState() => _MSTabbarDemo1State();
}
class _MSTabbarDemo1State extends State<MSTabbarDemo1> {
List<String> _tabs = ["历史", "新闻", "军事", "搞笑"];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
appBar: AppBar(
title: Text("MSTabbarDemo1"),
bottom: TabBar(
tabs: _tabs.map((e) {
return Tab(text: e);
}).toList(),
),
),
body: TabBarView(
children: _tabs.map((e) {
return Container(
color: Colors.red,
alignment: Alignment.center,
child: Text(e),
);
}).toList(),
),
),
);
}
}
95.gif
2.2 示例2
使用TabController 作为Tabbar的联动控制器
class MSTabbarDemo2 extends StatefulWidget {
const MSTabbarDemo2({Key? key}) : super(key: key);
@override
State<MSTabbarDemo2> createState() => _MSTabbarDemo2State();
}
class _MSTabbarDemo2State extends State<MSTabbarDemo2>
with SingleTickerProviderStateMixin {
late TabController _tabController;
List<String> _tabs = [
"历史",
"新闻",
"军事",
"娱乐",
"影视",
];
int _currentIndex = 0;
@override
void initState() {
_tabController = TabController(length: _tabs.length, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("MSTabbarDemo2"),
bottom: TabBar(
controller: _tabController, // 联动控制器
tabs: _tabs.map((e) {
return Tab(text: e);
}).toList(),
isScrollable:
false, // Tabbar 是否可滚动，默认为false，为true时，Tabbar可水平滚动，且每个bar都包裹内容，为false时，Tabbar不可滚动，且每个tab宽度一致
padding: EdgeInsets.symmetric(horizontal: 20), // 内间距
indicatorColor: Colors.amber, // 指示器颜色
indicatorWeight: 4.0, // 指示器宽度
indicatorPadding: EdgeInsets.symmetric(horizontal: 5.0), // 指示器内间距
indicatorSize: TabBarIndicatorSize
.tab, // 指示器大小 TabBarIndicatorSize.tab 或者 TabBarIndicatorSize.label
labelColor: Colors.white, // label 颜色
labelStyle: TextStyle(
fontSize: 16.0, fontWeight: FontWeight.w400), // label 样式
labelPadding: EdgeInsets.all(5), // label 内边距
unselectedLabelColor: Colors.green[200], // 未选中时Label的颜色
unselectedLabelStyle: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.w300), // 未选中时Label的样式
overlayColor: MaterialStateProperty.all(Colors.red), // 高亮颜色
enableFeedback: true, // 是否启动点击反馈
onTap: (int value) {
_currentIndex = value;
setState(() {});
print(value);
},
),
),
body: Container(
color: Colors.red[200],
alignment: Alignment.center,
child: Text(_tabs[_currentIndex]),
),
);
}
}
96.gif
2.3 示例3
自定义指示器且tabbar可滚动
class MSTabbarDemo3 extends StatefulWidget {
const MSTabbarDemo3({Key? key}) : super(key: key);
@override
State<MSTabbarDemo3> createState() => _MSTabbarDemo3State();
}
class _MSTabbarDemo3State extends State<MSTabbarDemo3>
with SingleTickerProviderStateMixin {
List<String> _tabs = ["历史", "军事", "新闻", "短视频", "影视", "音乐", "直播", "小说", "热点"];
late TabController _controller;
int _currentIndex = 0;
@override
void initState() {
_controller = TabController(length: _tabs.length, vsync: this);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("MSTabbarDemo3"),
bottom: TabBar(
controller: _controller,
tabs: _tabs.map((e) {
return Tab(text: e);
}).toList(),
isScrollable: true, // Tabbar是否可水平滚动
dragStartBehavior: DragStartBehavior.start, // 默认start 更为平滑
// physics: ClampingScrollPhysics(), // 滑动到末端时,继续拉动,ClampingScrollPhysics安卓微光效果
physics:
BouncingScrollPhysics(), // 滑动到末端时,继续拉动,BouncingScrollPhysics苹果回弹效果
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.red[300]!, width: 2.0),
insets: EdgeInsets.symmetric(horizontal: 5.0)),
onTap: (int index) {
_currentIndex = index;
setState(() {});
},
),
),
body: Container(
color: Colors.yellow[200],
alignment: Alignment.center,
child: Text(_tabs[_currentIndex]),
),
);
}
}
97.gif
网友评论