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

   日期:2020-06-04     浏览:125    评论:0    
核心提示:在使用TabBar当要对当前选中的Label字体变大时,会出现字体抖动的现象。在其它Flutter文字动画中,只要包含中文,其实都会出现抖动的情况。先看下效果图:原理:默认动画是字体的改变,比如从20到40,其实我们可以用Transform的Scale实现的效果,字体从20到40,其实是放大了一倍,相对应的Scale就是从1.0变成2.0,这样就很简单了,动画也就流畅很多了。操作方法:复制一份tabs.dart的源代码找到_TabStyle的build方法,把下面的代码注释,_tabbar文字抖动

在使用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

 

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服