Flutter 之 TabBar & TabBarView

“tab9”,

];

mController = TabController(

length: tabTitles.length,

vsync: this,

);

}

Widget _appBarView() {

return AppBar(

title: Text(“TabBar & TabBarView”,

style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),

elevation: 0,

bottom: _tabBar(),

);

}

Widget _tabBar() {

return TabBar(

//设置tab是否可水平滑动

isScrollable: true,

//控制器

controller: mController,

//设置tab文字得类型

labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),

//设置tab选中得颜色

labelColor: Colors.black,

//设置tab未选中得颜色

unselectedLabelColor: Colors.black45,

//设置自定义tab的指示器，CustomUnderlineTabIndicator

//若不需要自定义，可直接通过

//indicatorColor 设置指示器颜色

//indicatorWight 设置指示器厚度

//indicatorPadding

//indicatorSize 设置指示器大小计算方式

indicator: CustomUnderlineTabIndicator(

strokeCap: StrokeCap.round,

insets: EdgeInsets.only(left: 15, right: 15),

borderSide: BorderSide(width: 4.0, color: Colors.red)),

tabs: tabTitles.map((item) {

return Tab(text: item);

}).toList());

}

Widget _tabBarView() {

return TabBarView(

controller: mController,

children: tabTitles.map((item) {

return Container(

color: _getColor(),

child: Center(

child: Text(item,

style: TextStyle(

fontSize: 18,

fontWeight: FontWeight.bold,

color: Colors.white)),

),

);

}).toList(),

);

}

Color _getColor() {

var random = new Random();

int r = random.nextInt(255);

int g = random.nextInt(255);

int b = random.nextInt(255);

print®;

print(g);

print(b);

return Color.fromARGB(255, r, g, b);

}

}

TabBarView

这里的children直接使用了Container显示效果，所以在切换的时候，并没有问题出现。但一般情况，我们都会为TabBarView的子类自定义一个Widget，并且会在这个Widget的 initState() 方法里面进行数据的初始化。这时候切换Tab，会发现界面又初始化了？~

（网传）Flutter中为了节约内存不会保存widget的状态，widget都是临时变量。所以，每次切换重修的时候，都会调用 initState() 方法

解决：

在对应的Widget里面的State类，继承AutomaticKeepAliveClientMixin抽象类，并且重写方法，返回true，强制widget不被销毁：

@override

bool get wantKeepAlive => true;

PS：widget在不显示也会强制保存在内存中，所以需要合理使用。

CustomUnderlineTabIndicator 自定义圆角指示器

最简单的，参考UnderlineTabIndicator（代码90行），对Ponit的画笔做了参数自定义。StrokeCap使用了.round的方式，就能实现。

作者：Grey_zbb
链接：https://www.jianshu.com/p/68fa1c725415
来源：简书

学习宝典

对我们开发者来说，一定要打好基础，随时准备战斗。不论寒冬是否到来，都要把自己的技术做精做深。虽然目前移动端的招聘量确实变少了，但中高端的职位还是很多的，这说明行业只是变得成熟规范起来了。竞争越激烈，产品质量与留存就变得更加重要，我们进入了技术赋能业务的时代。

不论遇到什么困难，都不应该成为我们放弃的理由！

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，对此我针对Android程序员，我这边给大家整理了一套学习宝典！包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

【Android核心高级技术PDF文档，BAT大厂面试真题解析】

【算法合集】

【延伸Android必备知识点】

【Android部分高级架构视频学习资源】
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
img-wDWKnPhe-1714701403475)]

【延伸Android必备知识点】

[外链图片转存中…(img-NyR5szQZ-1714701403478)]

【Android部分高级架构视频学习资源】
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！