TabBar介绍

一个显示水平行选项卡的Widget。 通常创建为 AppBar 的 AppBar.bottom 部分并与 TabBarView 结合使用

在什么情况下使用TabBar

当你的app内容类别比较多的时候，我们常常会用到TabBar，例如网易新闻、京东、B站等，所以TabBar是一个使用非常频繁的组件。

如何创建

步骤一：创建TabController

为了使所选的 tab 与它所对应的内容能够同步变化，需要用 TabController 进行控制。我们既可以手动创建一个 TabController ，也能够直接使用 DefaultTabController widget。最简单的选择是使用 DefaultTabController widget，因为它能够创建出一个可供所有子 widgets 使用的 TabController

DefaultTabController(// 选项卡的数量length: 3,child: // 在下一步完成此代码
);

步骤二：创建tabs

当我们创建DefaultTabController, 接下来就可以用 TabBar widget 来创建 tabs。下面这个创建了包含三组 Tab widget 的 TabBar（一个），并把它放置于 AppBar widget 中。

DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: Text("TabBar"),bottom: TabBar(tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],),),),
);

步骤三：为每个Tab创建内容

现在我们已经成功创建了一些 tabs，接下来要实现的是 tab 被选中时显示其对应的内容。为了实现这个效果，我们将使用 TabBarView widget。

import 'package:flutter/material.dart';class TabBarExample extends StatefulWidget {@override_TabBarExampleState createState() => _TabBarExampleState();
}class _TabBarExampleState extends State {@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: Text("TabBar"),bottom: TabBar(tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],),),body: TabBarView(children: [Icon(Icons.directions_bike),Icon(Icons.directions_boat),Icon(Icons.directions_car),],),),);}
}

TabBar效果图

​​​​​​​

TabBar属性和说明

TabBar属性详细使用

1.tabs

由两个多个组成的Tab列表

TabBar(tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

2.controller

可以控制tab的控制器

TabController _tabController;@override
void initState() {// TODO: implement initStatesuper.initState();_tabController = TabController(length: 3, vsync: this);
}TabBar(controller: _tabController,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

3.isScrollable

标签栏是否可以水平滚动

TabBar(isScrollable: false,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

4.indicatorColor

设置选中Tab指示器的颜色

TabBar(indicatorColor: Colors.red,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

5.automaticIndicatorColorAdjustment

是否自动调整 indicatorColor，如果 automaticIndicatorColorAdjustment 为 true 时，那么indicatorColor 会自动调整成 Colors.white

TabBar(automaticIndicatorColorAdjustment: false,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

6.indicatorWeight

设置选中Tab指示器线条的粗细

TabBar(indicatorColor: Colors.red,indicatorWeight: 5,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

7.indicatorPadding

设置选中Tab指示器间距，默认值为 EdgeInsets.zero

TabBar(indicatorColor: Colors.red,indicatorWeight: 5,indicatorPadding: EdgeInsets.only(bottom: 2),tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

8.indicator

设置选中Tab指示器的外观

TabBar(indicatorColor: Colors.red,indicatorWeight: 5,indicatorPadding: EdgeInsets.only(bottom: 2),indicator: BoxDecoration(gradient: LinearGradient(colors: [Colors.orange,Colors.green]),),tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

9.indicatorSize

设置选中Tab指示器的大小，该值是一个枚举类型，TabBarIndicatorSize.tab 跟随 Tab 的宽度，TabBarIndicatorSize.label 跟随 Tab 内容文字的宽度。

TabBar(indicatorColor: Colors.red,indicatorSize: TabBarIndicatorSize.tab,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

10.labelColor

设置选中Tab文字的颜色

TabBar(indicatorColor: Colors.red,labelColor: Colors.pink,tabs: [Tab(icon: Icon(Icons.directions_bike),),Tab(icon: Icon(Icons.directions_boat),),Tab(icon: Icon(Icons.directions_car),),],
)

11.labelStyle

设置选中Tab文字的样式

TabBar(labelStyle: TextStyle(backgroundColor: Colors.green,fontSize: 20),tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

12.labelPadding

设置选中Tab内容的间距

TabBar(labelStyle: TextStyle(backgroundColor: Colors.green,fontSize: 20),labelPadding: EdgeInsets.all(0),tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

13.unselectedLabelColor

设置未选中Tab文字的颜色

TabBar(unselectedLabelColor: Colors.orange,tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

14.unselectedLabelStyle

设置未选中Tab文字的样式

TabBar(unselectedLabelColor: Colors.orange,unselectedLabelStyle: TextStyle(backgroundColor: Colors.pink),tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

15.dragStartBehavior

处理拖动开始行为的方式

TabBar(unselectedLabelColor: Colors.orange,unselectedLabelStyle: TextStyle(backgroundColor: Colors.pink),dragStartBehavior: DragStartBehavior.start,tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

16.overlayColor

定义响应焦点、悬停和飞溅颜色。

17.mouseCursor

鼠标指针进入或悬停在鼠标指针上时的光标，针对 Flutter web 应用

TabBar(unselectedLabelColor: Colors.orange,unselectedLabelStyle: TextStyle(backgroundColor: Colors.pink),mouseCursor: SystemMouseCursors.allScroll,tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

18.enableFeedback

检测到的手势是否应提供声音和/或触觉反馈，默认为 true

TabBar(enableFeedback: true,tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

19.onTap

单击Tab时的回调

TabBar(enableFeedback: true,onTap: (index) {print(index);},tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)

20.physics

TabBar的滚动视图如何响应用户输入，

例如，确定在用户停止拖动滚动视图后滚动视图如何继续动画

TabBar(physics: NeverScrollableScrollPhysics(),tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),Tab(icon: Icon(Icons.directions_boat), text: "轮船",),Tab(icon: Icon(Icons.directions_car), text: "汽车",),],
)