[版权申明]非商业目的注明出处可自由转载
博文地址：https://blog.csdn.net/ShuSheng0007/article/details/113094263
出自：shusheng007

文章目录

• 概述
• 目标UI
• 控件
• 使用方法
• 进阶
• • 如何使用自定义TabController
  • 如何给DefaultTabController设置Tab切换监听
  • 如何自定义Tab指示器
• 总结

概述

Flutter 秒懂系列大部分会着眼于应用层面，不会过于深入原理，否则会以深入理解为题。

那为啥不写深入理解呢？

1. 本人目前阶段也是刚接触Flutter，自认为也是个二把刀，怕误人子弟。
2. 对于大部分人，熟练掌握应用层就足够了。

让我们言归正传，Flutter将一切都抽象成了Widget，而我们日常工作大部分时间其实是在使用各种UI Widget构建常见UI页面，非UI widget反而不多。所以我就先总结UI相关的Widget常用方法。

那为什么先写TabBar呢？是因为它简单吗？不是，是因为我最近刚好用到啦，呵呵。。

目标UI

今天介绍的控件用来构建如下类型的UI，这也是一种常见的UI。

控件

涉及到两个Widget外加一个控制器：

• TabBar

负责构建那些tab

• TabBarView

负责构建每个tab的内容页

• TabController （类）一般使用 DefaultTabController 即可

将TabBar与TabBarView联动起来，例如点击tab，则切换相应的view。切换view则选择相应的tab。

使用方法

1. 构建一个TabBar

  final tabs = [Tab(text: '第一页',),Tab(icon: Icon(Icons.add_alert_rounded),),Tab(icon: Icon(Icons.accessibility_rounded),)];TabBar(tabs: tabs, ),

TabBar有很多属性，但是只有tabs是必须的，这个也很好理解。

 const TabBar({Key key,@required this.tabs,this.controller,...})

如上源码所示， tabs 一个List类型, 但是我们一个使用List就可以了满足大部分需求了。值得注意的是里面还有一个可选的TabController类型的属性

2. 构建相应的TabBarView

TabBarView(children: [Icon(Icons.supervised_user_circle_rounded),Icon(Icons.add_alert_rounded),Icon(Icons.accessibility_rounded),]),

也非常简单，传入与tabs对应数量的View就可以了。

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

如上所以，其也只有一个必选参数：children，类型为List。关键看里面也有一个可选的TabController类型的属性，也许你已经猜到了，TabBar 与 TabBarView 这两个控件就是通过将这个属性设置为同一个TabController来实现联动的。

3. 使用TabController 将TabBar 与 TabBarView联系起来

此处为简单我们使用DefaultTabController

下面是其源码，非常简单。传入tabs的数量，以及View即可

  const DefaultTabController({Key key,@required this.length,this.initialIndex = 0,@required this.child,}

此处值得注意的是我们使用了Scaffold 和AppBar，我们的TabBar是传递给AppBar的bottom属性的。也就是说tab是位于顶部AppBar的下面的。如果不想要在下面，可以将TabBar赋值给AppBar的title属性，或者直接代替AppBar也是可以的，剩下的就是你自己大胆尝试了，但是据我的尝试Scaffold是必须要的，不然会黑屏。

要想使tab位于底部，可以将TabBar赋值给Scaffold的bottomNavigationBar 属性即可

完整代码如下

class TabBarView extends StatelessWidget {final tabs = [Tab(text: '第一页',),Tab(icon: Icon(Icons.add_alert_rounded),),Tab(icon: Icon(Icons.accessibility_rounded),)];@overrideWidget build(BuildContext context) {return DefaultTabController(length: tabs.length,child: Scaffold(appBar: AppBar(title: Text('TabBar'),bottom: TabBar(tabs: tabs,),),body: TabBarView(children: [Icon(Icons.supervised_user_circle_rounded),Icon(Icons.add_alert_rounded),Icon(Icons.accessibility_rounded),]),),);}
}

经过以上3步即可完成Tab UI的的构建，其中TabBar中有很多可以配置Tab样式的属性，建议自己摸索一下，不然看了也记不住。当时发现默认样式达不到你的要求时，先去看看有没有一个属性可以配置，大部分情况下是没问题的。

进阶

下面我们提供一些稍微进阶的用法。

如何使用自定义TabController

非常简单，创建一个TabController 对象，同时赋值给TabBar与TabBarView即可。

class EnhanceTabBar extends StatefulWidget {@override_EnhanceTabBarState createState() => _EnhanceTabBarState();
}class _EnhanceTabBarState extends Statewith SingleTickerProviderStateMixin {TabController _tabController;final  tabs = [Tab(icon: Icon(Icons.add_alert_rounded),),Tab(icon: Icon(Icons.accessibility_rounded),)];@overridevoid initState() {super.initState();_tabController = TabController(length: tabs.length, vsync: this);_tabController.addListener(() {if (!_tabController.indexIsChanging) {//监听tab变化log('${_tabController.index}');        }});}@overridevoid dispose() {_tabController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(bottom: TabBar(tabs: tabs,controller: _tabController,),),body: TabBarView(controller: _tabController, children: [Icon(Icons.add_alert_rounded),Icon(Icons.accessibility_rounded),]),);}
}

如何给DefaultTabController设置Tab切换监听

使用 DefaultTabController.of(context) 获得TabController,然后加上监听即可。注意那个Builder，因为要保证BuildContext有层级关系才能获取到。

  @overrideWidget build(BuildContext context) {return DefaultTabController(length: tabs.length,child:  Builder(builder: (BuildContext context) {final TabController tabController = DefaultTabController.of(context);tabController.addListener(() {if (!tabController.indexIsChanging) {//监听tab切换}});return Scaffold(appBar: AppBar(bottom: TabBar(tabs: tabs,),),body: TabBarView(children: [...]),);},),);}

如何自定义Tab指示器

Tab指示器就是默认样式中切换tab时候下面那个白条条，通过设置TabBar的indicator即可，它需要一个Decoration 类型的参数。默认使用的是UnderlineTabIndicator

TabBar(tabs: tabs,indicator: UnderlineTabIndicator(),),

Flutter 提供了很多自定义这个指示器的实现类BoxDecoration、ShapDecoration、UnderlineTabIndicator 还有一个玩一样的东东FlutterLogoDecoration 。

总结

以上就是关于如何构建Tabs类型UI的一些知识，希望你们get到啦。点赞收藏不抓瞎，关注博主不迷路…

源码下载：flutter_app_learn

最后为自己拉个票吧，我支不量力的参加了2020年的博客之星评选，我知道现在拉票有点晚，但是还是希望小伙伴们能随手支持一下。
方法：点击下面的链接进入投票页面，为ShuSheng007贡献上您珍贵的一票，谢谢。
2020年博客之星

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！