抖动.gif
既然你看到了这篇博客，就说明你也深受这个问题的困扰。今天就带你轻松解决这个问题😉
先上解决办法再说原因
解决
对，就这么简单，只需要一行代码。
给TabController添加一个动画时间就可以了。
animationDuration: const Duration(milliseconds: 50),
// 添加 animationDuration: const Duration(milliseconds: 50)
DefaultTabController(
animationDuration: const Duration(milliseconds: 50),
length: _tabs.length,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TabBar(
tabs: _tabs,
isScrollable: true,
tabAlignment: TabAlignment.start,
indicatorColor: Colors.red,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.only(left: 20.w, right: 55.w),
labelPadding: EdgeInsets.only(left: 20.w, right: 20.w),
labelColor: GColors.primary,
labelStyle:
TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
unselectedLabelStyle:
TextStyle(fontSize: 14.sp, fontWeight: FontWeight.normal),
),
Expanded(child: TabBarView(children: [Container(), Container()]))
],
),
)
丝滑.gif
原因
通过查看TabController的源码发现，tab切换的默认动画是300毫秒。
image.png
我们切换tab时， 在300毫秒内执行了字体在从14过渡到18的动画，我们会看到明显的抖动效果。
如果我们切换tab时，字体大小设置为14过渡到25时或者更大，我们会发现抖动效果消失了。在相同的时间里，大小差值越大，我们看到的动画变化更快也就更平滑，所以我们也看不到抖动了。现在我们想大小差值不变，抖动消失，只需要减少动画时间就可以了！
