Flutter学习日记之自定义AppBar&顶部Tab切换_flutter defaulttabcontroller指示器自定义

​本文地址：https://blog.csdn.net/qq_40785165/article/details/117308118,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

这世界不会辜负每一份努力和坚持，时光不会怠慢执着而勇敢的每一个人!

今天分享的内容是Flutter如何进行顶部Tab切换效果，源码地址：https://gitee.com/fjjxxy/flutter-study.git，之前我也介绍过如何进行底部Tab切换，感兴趣的小伙伴可以去看看：Flutter学习日记之底部导航栏BottomNavigationBar组件的使用的使用，效果如下：

（一）讲顶部Tab切换之前先介绍一下AppBar,AppBar是应用的工具栏，由多个组件组成，部分参数如下:

使用上面表格中部分属性可以自定义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)),
          ],
        ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

（二）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"),
          ),
        ]),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

要先在Scaffold组件外面套一层DefaultTabController组件，这是一个选项卡控制器，默认初始索引为0，参数如下:

在child属性中可以配合AppBar中的bottom参数以及Scaffold的body参数进行Tab切换功能开发,如上代码所示，AppBar中的bottom参数是一个TabBar组件，用来定义Tab选项卡样式，TabBar部分参数如下:

在tabs参数中会有一个Tab组件集合，用来定义多个选项卡样式,Tab组件的参数如下：

在代码中，Scaffold的body中放了一个TabBarView组件，用来返回对应Tab的页面布局，TabBarView的部分参数如下：

总结一：利用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"),
          ),
        ]));
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

到此为止，AppBar与顶部Tab切换的效果就介绍完了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!