抖動(dòng).gif
既然你看到了這篇博客馋缅，就說明你也深受這個(gè)問題的困擾。今天就帶你輕松解決這個(gè)問題??
先上解決辦法再說原因
解決
對，就這么簡單奈惑，只需要一行代碼。
給TabController添加一個(gè)動(dòng)畫時(shí)間就可以了睡汹。
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的源碼發(fā)現(xiàn)肴甸，tab切換的默認(rèn)動(dòng)畫是300毫秒。
image.png
我們切換tab時(shí)囚巴， 在300毫秒內(nèi)執(zhí)行了字體在從14過渡到18的動(dòng)畫原在，我們會看到明顯的抖動(dòng)效果。
如果我們切換tab時(shí)彤叉，字體大小設(shè)置為14過渡到25時(shí)或者更大庶柿，我們會發(fā)現(xiàn)抖動(dòng)效果消失了。在相同的時(shí)間里秽浇，大小差值越大浮庐，我們看到的動(dòng)畫變化更快也就更平滑，所以我們也看不到抖動(dòng)了〖砘溃現(xiàn)在我們想大小差值不變审残，抖動(dòng)消失梭域，只需要減少動(dòng)畫時(shí)間就可以了！
