Flutter学习日记之自定义AppBar&顶部Tab切换

Posted 2021-06-06 Android_小黑

​本文地址：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的学习记录，与大家分享，谢谢大家的支持与阅读!