Flutter tabbar中文字体抖动简单处理方案

  • tabbar在中文字体大小变化过程中会出现抖动问题,比较影响使用体验,网上文章中有两种解决方案:
  • 方案1:修改flutter源码,这种方法的弊端是在flutter更新后会丢失原有改动。
  • 方案2:自定义tab的child,在tabbar点击切换索引时修改tab的child中TextStyle,这种方案简单一些,但是会存在滚动切换时文本变化更不上的情况,也是比较影响用户体验。
  • 我在方案二的基础上优化了一下切换索引的实现方案,通过监听tabbarView的滚动来实现切换索引,比原方案用户体验更好。
    代码:
int _index = 0;
  set index(int i) {
    if (_index != i) {
      _index = i;
      setState(() {});
    }
  }

// tabbarView的滚动监听
NotificationListener(
      child: TabBarView(
        controller: _tabController,
        children: [
          Container(),
          Container(),
          Container(),
          Container(),
          Container(),
        ],
      ),
      onNotification: (scrollNotification) {
        // print('$scrollNotification');
        if (scrollNotification is ScrollUpdateNotification) {
          double progress = scrollNotification.metrics.pixels /
              scrollNotification.metrics.maxScrollExtent;
          // 这里需要根据自己tabbar的数量修改计算方法
          index = (progress + 0.125) ~/ 0.25;
        }
        return true;
      },
    )

ps:如果TabBarView的children里面包含scroll,需要children实现NotificationListener并在onNotification里面返回true。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容