概述

今天主要实现一个仿头条顶部 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,
  })

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

  const TabBarView({
      Key key,      @required this.children,      this.controller,
    })

简单使用

接下来我们将使用两种方式实现基本使用，第一种方式是配合 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 });

要实现能动态改变状态的 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切换效果已经实现了。

上面是我入门时的学习内容： Flutte从入门到进阶实战学习视频，可以在这里免费分享给大家，关注+点赞，简信我【flutter】就行，篇幅有限，下篇文章继续讲解其他的内容。