Flutter仿头条顶部tab切换实现

微信公众号：[程序员指北] 关注可了解更多的教程。问题或建议，请公众号留言;

转载请注明出处: learnandfish.com/

概述

上篇咱们讲了实现一个仿闲鱼底部导航栏的功能，今天主要实现一个仿头条顶部tab切换实现，这种效果在项目中一样常常用到， 接下来咱们就从头开始实现。

效果图

老规矩，开局先上效果图。

仿头条顶部tab切换实现

要实现这样的效果，须要使用TabBar进行实现。咱们先讲一下TabBar的基本属性。

TabBar 和 TabBarView

TabBar是属于AppBar中的一个组件，一般和TabBarView结合使用。

TabBar构造方法及经常使用属性简介

const TabBar({
    Key key,
    @required this.tabs,
    this.controller,
    this.indicatorColor,
    this.labelColor,
    this.unselectedLabelColor,
  })
复制代码

属性名	属性值类型	说明
tabs	Tab类型的控件集合	要显示的全部tab子项
controller	TabController类型	主要用来监听tab的切换
indicatorColor	Color	tab子项指示器的颜色
labelColor	Color	子项文字的颜色
unselectedLabelColor	Color	未选中子项文字的颜色

TabBarView构造方法及经常使用属性简介

const TabBarView({
    Key key,
    @required this.children,
    this.controller,
  })
复制代码

属性名	属性值类型	说明
children	Widget的集合	对应TabBar每一个子项要显示的具体内容
controller	TabController类型	主要用来监听tab的切换

简单使用

接下来咱们将使用两种方式实现基本使用，第一种方式是配合DefaultTabController使用，另一种是配合 TabController使用。在咱们使用TabBar的时候必须放在Scaffold控件的AppBar中，若是咱们的App中Scaffold没法修改， 那咱们须要在想要实现tab效果的页面上包裹一层Scaffold组件，要使用TabBar组件，必须为其指定TabController，要否则 会报错，咱们先看第一种实现方式，在Scaffold组件外面包裹DefaultTabController实现。

DefaultTabController实现

首先，咱们先准备须要切换的tab子项的集合和对应tab子项的具体显示内容。

// 须要显示的tab子项集合
final tabs = <Tab>[
  Tab(
    text: "热门",
  ),
  Tab(
    text: "新闻",
  ),
];

// 对应上述tab切换后具体须要显示的页面内容
final tabBarViews = <Widget>[
  Center(
    child: Text("热门Tab对应的界面"),
  ),
  Center(
    child: Text("新闻Tab对应的界面"),
  ),
];
复制代码

而后再HomePage页面定义一个TabBar实现。

DefaultTabController(
      length: tabs.length, // tab的个数
      child: Scaffold(
        appBar: AppBar(
          title: TabBar(
            tabs: tabs,
          ),
        ),
        body: TabBarView(
          children: tabBarViews,
        ),
      ),
    );
复制代码

正常状况下，咱们的TabBar应该是对应appBar中的bottom属性的，但此处咱们卸载了title属性下，是由于咱们上层已经 有了一个appBar了，若是再把TabBar对应的写在appBar的bottom属性上，就会致使appBar留有一个空白很是难看，效果以下。 因此咱们定义在了title属性上。

TabController实现

上述实现方式有个局限，就是咱们点击切换tab的时候，每每须要监听同时更改页面状态。因此咱们以TabController实现。 首先先看一下TabController的构造方法及属性。

TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync });
复制代码

属性名	属性值类型	说明
initialIndex	int	初始选择的tab下标
length	int	tab的个数
vsync	TickerProvider	提供动画等行为

要实现能动态改变状态的tab切换效果必须先继承StatefulWidget，由于TabController须要TickerProvider，因此咱们同时 让咱们state类Mixins SingleTickerProviderStateMixin这个类。从而更容易的实现TabController，看一下具体的代码实现。

class ThirdPage extends StatefulWidget {
  @override
  State createState() => _ThirdPageState();
}

class _ThirdPageState extends State<ThirdPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabs.length, vsync: this);
    _tabController.addListener(() => print("当前点击的是第${_tabController.index}个tab"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TabBar(
          controller: _tabController,
          tabs: tabs,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: tabBarViews,
      ),
    );
  }
}
复制代码

至此，咱们的仿头条tab切换效果已经实现了。

因为电脑限制，完整代码后续将上传仓库，急需请留言。

篇幅有限，下篇文章继续讲解其余的内容。 第一时间获取最新内容，请关注公众号：程序员指北。 关注公众号回复flutter，你懂的。。。