Tab关键元素

TabController
这是Tab页的控制器，用于定义Tab标签和内容页的坐标，还可配置标签页的切换动画效果等。

TabController一般放入有状态控件中使用，以适应标签页数量和内容有动态变化的场景，如果标签页在APP中是静态固定的格局，则可以在无状态控件中加入简易版的DefaultTabController以提高运行效率，毕竟无状态控件要比有状态控件更省资源，运行效率更快。

TabBar
Tab页的Title控件，切换Tab页的入口，一般放到AppBar控件下使用，内部有*Title属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用Column或ListView控件包装一下。子元素为Tab类型的数组。
TabBarView
Tab页的内容容器，其内放置Tab页的主体内容。子元素可以是多个各种类型的控件。

先看一下Tab的构造方法:

TabBar({Key key,@required this.tabs,this.controller,this.isScrollable: false,this.indicatorColor,this.indicatorWeight: 2.0,this.indicatorPadding: EdgeInsets.zero,this.indicator,this.indicatorSize,this.labelColor,this.labelStyle,this.unselectedLabelColor,this.unselectedLabelStyle,})

属性	意义
tabs	一般使用Tab对象,当然也可以是其他的Widget
controller	TabController对象
isScrollable	是否可滚动
indicatorColor	指示器颜色
indicatorWeight	指示器厚度
indicatorPadding	底部指示器的Padding
indicator	指示器decoration，例如边框等
indicatorSize	指示器大小计算方式
labelColor	选中Tab文字颜色
labelStyle	选中Tab文字Style
unselectedLabelColor	未选中Tab中文字颜色
unselectedLabelStyle	未选中Tab中文字style

Tab使用方法

import 'package:flutter/material.dart';class MyHomePage extends StatefulWidget {@overridecreateState() => new MyHomePageState();
}class MyHomePageState extends State<MyHomePage> {final List<Tab> myTabs = <Tab>[Tab(text: '明教'),Tab(text: '霸刀'),Tab(text: '天策'),Tab(text: '纯阳'),Tab(text: '少林'),Tab(text: '藏剑'),Tab(text: '七秀'),Tab(text: '五毒'),];@overrideWidget build(BuildContext context) {return DefaultTabController(length: myTabs.length,child: Scaffold(appBar: AppBar(backgroundColor: Colors.blue,title: TabBar(tabs: myTabs,isScrollable: true,indicatorColor: Colors.red,labelColor: Colors.white,),),body: TabBarView(children: myTabs.map((Tab tab) => Center(child: Text(tab.text))).toList()),),);}
}

Flutter切换tab后保留tab状态

Flutter中为了节约内存不会保存widget的状态，widget都是临时变量。当我们使用TabBar，TabBarView时我们就会发现，切换tab后再重新切换回上一页面，这时候tab会重新加载重新创建，体验很不友好。Flutter出于自己的设计考虑并没有延续android的ViewPager这样的缓存页面设计，毕竟控件两端都要开发，目前还在beta版本有很多设计还不够完善，但是设计的拓展性没得说，flutter还是为我们提供了解决办法。我们可以强制widget不显示情况下保留状态，下回再加载时就不用重新创建了。

AutomaticKeepAliveClientMixin

AutomaticKeepAliveClientMixin 是一个抽象状态，使用也很简单，我们只需要用我们自己的状态继承这个抽象状态，并实现 wantKeepAlive 方法即可。

继承这个状态后，widget在不显示之后也不会被销毁仍然保存在内存中，所以慎重使用这个方法。

详细官方文档请看这里。

这里还有一个说的比较详细的 demo。

/** Created by 李卓原 on 2018/9/13.* email: zhuoyuan93@gmail.com**/import 'package:flutter/material.dart';class TweetsListPage extends StatefulWidget {@overrideState<StatefulWidget> createState() => TweetListState();
}class TweetListState extends State<TweetsListPage>with AutomaticKeepAliveClientMixin {@overrideWidget build(BuildContext context) {return Center(child: Text('TweetsListPage'),);}@overridevoid dispose() {print('TweetsListPage dispose');super.dispose();}// 当页面不显示的时候也常驻在内存中@overridebool get wantKeepAlive => true;
}

动态改变tab

有时候我们需要手动的改变当前显示的tab , 这时候就需要自己创建一个controller了 ,

TabController tabController;@overridevoid initState() {// TODO: implement initStatesuper.initState();tabController = TabController(length: myTabs.length, vsync: this);}

这时, 我们外面套用的 DefaultTabController 就可以去掉了 , 它的作用就是当我们没写controller的时候使用的 , 因为tabbar以及tabbarView是必须有个controller的.

执行

tabController.animateTo(index)

就会跳转到对应的tab , 当然要在tabBar 以及tabbarView 中都设置controller .

炫酷版:

代码: github

Flutter TabBar相关推荐

flutter tabBar 选项卡自定义指示器
使用flutter TabBar 做自定义选项卡. 1.根据index 使用三目运算,缺点点击以后没有滑动效果. tabs:TabMoudels.map((i) => Container(pa ...
flutter tabBar 的属性及自定义实现
flutter tabBar 的属性及自定义实现前言一.TabBar是什么? 二.TabBar 自定义三. Tab 自定义总结前言在Flutter中,TabBar的indicatorPad ...
Flutter TabBar 标签栏背景颜色、点击水波纹颜色配置
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注 [x2] ...
flutter TabBar 底部导航栏
更多文章请查看 lutter从入门到精通实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
Flutter TabBar TabBarView
Flutter 系列文章总体目录 TabBar 是一排水平的标签,可以来回切换,效果图: 属性说明 tabs 一系列标签控件 controller 标签选择变化控制器 isScrollable 是 ...
Flutter实现酷狗流畅Tabbar效果
在2021年末,酷狗发布了最新版11.0.0版本,这是一次重大的UI重构,更新完打开着实让我耳目一新.在原有风格上,整个App变得更加清爽,流畅.其中Tabbar的风格让我非常感兴趣,如果用Flutt ...
Flutter 项目开发指导从基础入门到精通使用目录
Flutter 从入门到精通系列文章本文章为 Flutter 开发中的经验积累分享.教程分享.开发笔记分享目录,持续维护中. 题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Fl ...
Flutter 仿掘金之动态Tabbar
效果不多逼逼 Tabbar 先看Tabbar的参数 const TabBar({Key key,@required this.tabs, // itemthis.controller, //控制器t ...
【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )
文章目录一.Scaffold 组件二.实现顶部导航栏三.DefaultTabController 导航标签控制组件四.TabBar 导航按钮组件五.Tab 标签组件六.TabBarView ...

Flutter TabBar