Flutter TabBarView组件
简述
TabBarView 是 Material 组件库中提供了 Tab 布局组件,通常和 TabBar 配合使用。
TabBarView封装了PageView,使用起来非常简单。
基本属性
TabBarView
controller:TabBarView控制器。
children:子元素。
TabBar
tabs 一系列标签控件
controller 标签选择变化控制器
isScrollable 是否可滚动,默认false
indicatorColor 指示器颜色
indicatorWeight 指示器粗细
indicator 指示器,可自定义形状等样式
indicatorSize 指示器长短,tab:和tab一样长,label:和标签label 一样长
labelColor 标签颜色
labelStyle 标签样式
labelPadding 标签padding
unselectedLabelColor 未选中标签颜色
unselectedLabelStyle 未选中标签样式
简单使用
class TabBarViewPage extends StatefulWidget {
const TabBarViewPage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _TabBarViewPageState();
}
}
class _TabBarViewPageState extends State<TabBarViewPage> with SingleTickerProviderStateMixin {
final List tabs = ["One", "Two", "Three", "Four", "Five", "Six", "Seven"];
late TabController _controller;
@override
void initState() {
_controller = TabController(length: tabs.length, vsync: this);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("TabBarView & PageView"),
bottom: TabBar(
indicatorColor: Colors.red,
controller: _controller,
isScrollable: true,
tabs: tabs.map((e) {
return Tab(text: e);
}).toList(),
),
),
body: TabBarView(
dragStartBehavior: DragStartBehavior.down,
controller: _controller,
children: tabs.map((e) {
return Container(
alignment: Alignment.center,
child: Text(e, textScaleFactor: 3),
);
}).toList(),
),
);
}
}