Fllutter TabBar中文文字抖动完美解决方案

在Flutter中,TabBar在切换标签时中文文字可能出现抖动问题。本文提供一种解决方案,通过修改TabStyle的源代码,利用Transform的Scale动画代替字体大小变化,从而实现平滑过渡,避免抖动现象。详细操作步骤包括复制tabs.dart文件,修改特定代码段,并给出了适用于Flutter 1.17.2版本的源码链接。
摘要由CSDN通过智能技术生成

在使用TabBar当要对当前选中的Label字体变大时,会出现字体抖动的现象。

在其它Flutter文字动画中,只要包含中文,其实都会出现抖动的情况。

先看下效果图:

原理:

默认动画是字体的改变,比如从20到40,其实我们可以用Transform的Scale实现的效果,字体从20到40,其实是放大了一倍,相对应的Scale就是从1.0变成2.0,这样就很简单了,动画也就流畅很多了。

操作方法:

复制一份tabs.dart的源代码

找到_TabStyle的build方法,修改以下代码,

 

修改return

 

_TabStyle源代码(Flutter版本:1.17.2࿰

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值