在使用TabBar当要对当前选中的Label字体变大时,会出现字体抖动的现象。
在其它Flutter文字动画中,只要包含中文,其实都会出现抖动的情况。
先看下效果图:
原理:
默认动画是字体的改变,比如从20到40,其实我们可以用Transform的Scale实现的效果,字体从20到40,其实是放大了一倍,相对应的Scale就是从1.0变成2.0,这样就很简单了,动画也就流畅很多了。
操作方法:
复制一份tabs.dart的源代码
找到_TabStyle的build方法,修改以下代码,
修改return
_TabStyle源代码(Flutter版本:1.17.2,不同版本的Flutter可能tabs.dart的源代码有所差异,最好按照上面的方法修改):
class _TabStyle extends AnimatedWidget {
const _TabStyle({
Key key,
Animation<double> animation,
this.selected,
this.labelColor,
this.unselectedLabelColor,
this.labelStyle,
this.unselectedLabelStyle,
@required this.child,
}) : super(key: key, listenable: animation);
final TextStyle labelStyle;
final TextStyle unselectedLabelStyle;
final bool selected;
final Color labelColor;
final Color unselectedLabelColor;
final Widget child;
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final TabBarTheme tabBarTheme = TabBarTheme.of(context);
final Animation<double> animation = listenable as Animation<double>;
// To enable TextStyle.lerp(style1, style2, value), both styles must have
// the same value of inherit. Force that to be inherit=true here.
final TextStyle defaultUnselectedStyle = (unselectedLabelStyle ??
tabBarTheme.unselectedLabelStyle ??
labelStyle ??
themeData.primaryTextTheme.bodyText1)
.copyWith(inherit: true);
final TextStyle defaultStyle = (labelStyle ??
tabBarTheme.labelStyle ??
themeData.primaryTextTheme.bodyText1)
.copyWith(inherit: true).copyWith(fontSize:defaultUnselectedStyle.fontSize);
final TextStyle textStyle = selected
? TextStyle.lerp(defaultStyle, defaultUnselectedStyle, animation.value)
: TextStyle.lerp(defaultUnselectedStyle, defaultStyle, animation.value);
final double multiple = labelStyle.fontSize / unselectedLabelStyle.fontSize;
final double _scale = selected
? lerpDouble(multiple, 1, animation.value)
: lerpDouble(1, multiple, animation.value);
final Color selectedColor = labelColor ??
tabBarTheme.labelColor ??
themeData.primaryTextTheme.bodyText1.color;
final Color unselectedColor = unselectedLabelColor ??
tabBarTheme.unselectedLabelColor ??
selectedColor.withAlpha(0xB2); // 70% alpha
final Color color = selected
? Color.lerp(selectedColor, unselectedColor, animation.value)
: Color.lerp(unselectedColor, selectedColor, animation.value);
return DefaultTextStyle(
style: textStyle.copyWith(color: color),
// child: child,
child: IconTheme.merge(
data: IconThemeData(
size: 24.0,
color: color,
),
child: Transform.scale(scale: _scale, child: child),
),
);
}
}
引用:
import 'package:CustomTabBar/custom_tab_bar.dart' as Custom;
Custom.TabBar(
controller: this._controller2,
indicatorSize: Custom.TabBarIndicatorSize.label,
indicatorColor: Colors.white,
labelStyle: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
unselectedLabelStyle: TextStyle(fontSize: 15.0),
indicatorWeight: 3.0,
isScrollable: true,
indicatorPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 5.0),
tabs: [
Tab(text: '动态'),
Tab(text: '热门'),
Tab(text: '附近'),
Tab(text: '颜值'),
Tab(text: '音乐'),
Tab(text: '跳舞'),
],
),
源码地址:https://github.com/terminatorx/CustomTabBar