本文地址：https://blog.csdn.net/qq_40785165/article/details/117308118,转载需附上此地址
大家好，我是小黑，一个还没秃头的程序员~~~
这世界不会辜负每一份努力和坚持，时光不会怠慢执着而勇敢的每一个人!
今天分享的内容是Flutter如何进行顶部Tab切换效果，源码地址：https://gitee.com/fjjxxy/flutter-study.git，之前我也介绍过如何进行底部Tab切换，感兴趣的小伙伴可以去看看：Flutter学习日记之底部导航栏BottomNavigationBar组件的使用的使用，效果如下：
（一）讲顶部Tab切换之前先介绍一下AppBar,AppBar是应用的工具栏，由多个组件组成，部分参数如下:
| 参数 | 说明 |
|---|---|
| leading | 左侧显示的图标，如返回键 |
| automaticallyImplyLeading | 自动隐藏左侧图标 |
| title | 文字标题 |
| actions | 右侧的操作，由多个组件组成 |
| flexibleSpace | 高度和整个AppBar一样，可实现如折叠标题栏的效果 |
| bottom | 用来实现tab切换,可实现页面顶部tab切换的效果 |
| backgroundColor | AppBar背景颜色 |
| brightness | 设置手机状态栏亮度[Brightness.dark/Brightness.light] |
| centerTitle | 标题是否居中 |
| titleSpacing | 标题文字与其他组件的间距 |
使用上面表格中部分属性可以自定义AppBar,效果如图：
代码如下：
appBar: AppBar(
title: Text("自定义AppBar"),
brightness: Brightness.light,
backgroundColor: Colors.blue,
centerTitle: false,
leading: IconButton(
//左边的图标按钮,会覆盖默认的返回按钮
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios)),
actions: [
//右边的图标按钮
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
IconButton(onPressed: () {}, icon: Icon(Icons.settings)),
],
),
（二）DefaultTabController实现顶部Tab切换
可以使用AppBar中的bottom属性配合Scaffold组件的body属性实现页面顶部Tab切换的效果，具体效果如下：
先贴代码：
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class AppBarDemoPage extends StatefulWidget {
@override
_AppBarDemoPageState createState() => _AppBarDemoPageState();
}
class _AppBarDemoPageState extends State<AppBarDemoPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 8,
child: Scaffold(
appBar: AppBar(
title: Text("自定义AppBar"),
brightness: Brightness.light,
backgroundColor: Colors.blue,
centerTitle: false,
leading: IconButton(
//左边的图标按钮,会覆盖默认的返回按钮
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios)),
actions: [
//右边的图标按钮
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
IconButton(onPressed: () {}, icon: Icon(Icons.settings)),
],
bottom: TabBar(
unselectedLabelStyle: TextStyle(fontSize: 10),
labelStyle: TextStyle(fontSize: 20),
unselectedLabelColor: Colors.white,
labelColor: Colors.black,
indicatorWeight: 2,
//指示器粗细
indicatorColor: Colors.black,
//指示器颜色
isScrollable: true,
tabs: <Widget>[
Tab(
text: "分类1",
icon: Icon(Icons.menu),
),
Tab(
text: "分类2",
),
Tab(
text: "分类3",
),
Tab(
text: "分类4",
),
Tab(
text: "分类5",
),
Tab(
text: "分类6",
),
Tab(
text: "分类7",
),
Tab(
text: "分类8",
),
]),
),
body: TabBarView(children: <Widget>[
Center(
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context, "/tabController");
},
child: Text("通过TabController创建顶部Tab切换"),
),
),
Center(
child: Text("页面2"),
),
Center(
child: Text("页面3"),
),
Center(
child: Text("页面4"),
),
Center(
child: Text("页面5"),
),
Center(
child: Text("页面6"),
),
Center(
child: Text("页面7"),
),
Center(
child: Text("页面8"),
),
]),
),
);
}
}
要先在Scaffold组件外面套一层DefaultTabController组件，这是一个选项卡控制器，默认初始索引为0，参数如下:
| 参数 | 说明 |
|---|---|
| length | Tab数量(需要和后面的TabBarView子项数量一致) |
| initialIndex | 初始索引 |
| child | 组件，可以配合Scaffold进行开发 |
在child属性中可以配合AppBar中的bottom参数以及Scaffold的body参数进行Tab切换功能开发,如上代码所示，AppBar中的bottom参数是一个TabBar组件，用来定义Tab选项卡样式，TabBar部分参数如下:
| 参数 | 说明 |
|---|---|
| tabs | 组件集合，一般为Tab组件 |
| controller | 控制器，后文会介绍 |
| isScrollable | TabBar是否可以滚动，一般用于数量较多的情况 |
| indicatorColor | 指示器的颜色 |
| labelColor | Tab文字选中时的颜色 |
| labelStyle | Tab文字选中时的样式，定义文字大小等 |
| unselectedLabelColor | Tab文字未选中时的颜色等 |
| unselectedLabelStyle | Tab文字未选中时的样式，定义文字大小等 |
| onTap | 点击事件 |
在tabs参数中会有一个Tab组件集合，用来定义多个选项卡样式,Tab组件的参数如下：
| 参数 | 说明 |
|---|---|
| text | 文字 |
| icon | 图标，在文字的上方 |
| iconMargin | 图标与外部的间距 |
| child | 自定义的组件，可以自定义Tab样式 |
在代码中，Scaffold的body中放了一个TabBarView组件，用来返回对应Tab的页面布局，TabBarView的部分参数如下：
| 参数 | 说明 |
|---|---|
| children | 页面组件集合，对应相应的Tab |
| controller | 控制器，后文会介绍 |
总结一：利用Scaffold的body参数以及AppBar中的bottom参数就可实现顶部Tab切换功能，关键组件：[TabBarView]、[TabBar]、[Tab]
（三）TabController实现顶部Tab切换
使用TabController需要将组件定义成有状态组件，并在initState方法中实例化TabController，也可以给实例添加监听事件，然后将实例传给TabBar以及TabBarView组件的controller参数中，其他流程和上面的一致，效果和上面的实现方案一致，具体效果看文章开头gif动图，代码如下：
import 'package:flutter/material.dart';
import 'package:flutter_study/utils/Toast.dart';
class TabControllerPage extends StatefulWidget {
@override
_TabControllerPageState createState() => _TabControllerPageState();
}
class _TabControllerPageState extends State<TabControllerPage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_tabController.dispose();
}
@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 8, vsync: this);
_tabController.addListener(() {
Toast.toast(context, msg: _tabController.index.toString());
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TabControllerPage"),
bottom: TabBar(
controller: _tabController,
unselectedLabelStyle: TextStyle(fontSize: 10),
labelStyle: TextStyle(fontSize: 20),
unselectedLabelColor: Colors.white,
labelColor: Colors.black,
indicatorWeight: 2,
//指示器粗细
indicatorColor: Colors.black,
//指示器颜色
isScrollable: true,
tabs: <Widget>[
Tab(
text: "分类1",
icon: Icon(Icons.menu),
),
Tab(
text: "分类2",
),
Tab(
text: "分类3",
),
Tab(
text: "分类4",
),
Tab(
text: "分类5",
),
Tab(
text: "分类6",
),
Tab(
text: "分类7",
),
Tab(
text: "分类8",
),
]),
),
body: TabBarView(controller: _tabController, children: <Widget>[
Center(
child: Text("页面1"),
),
Center(
child: Text("页面2"),
),
Center(
child: Text("页面3"),
),
Center(
child: Text("页面4"),
),
Center(
child: Text("页面5"),
),
Center(
child: Text("页面6"),
),
Center(
child: Text("页面7"),
),
Center(
child: Text("页面8"),
),
]));
}
}
到此为止，AppBar与顶部Tab切换的效果就介绍完了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!
5362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
