完美解决flutter tab文字大小不同时切换布局抖动问题

最新推荐文章于 2024-12-24 14:46:19 发布

原创

最新推荐文章于 2024-12-24 14:46:19 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#组件 #flutter

本文介绍了在Flutter中遇到TabBar文字大小不一致时，切换Tab出现布局抖动的问题。为了解决这个问题，提出了通过预先计算每个Tab的文字宽度并固定Tab条目的尺寸，从而确保布局在文字大小变化时保持稳定的方法。代码示例展示了如何实现这一解决方案，包括使用TabBar、TextPainter和Container来控制Tab的宽度和样式。

场景当flutter设置tab选中和未选中时候文字大小不一致时tab多余等于三个时会出现切换由于文字大小改变导致的布局抖动

方案一开始就设置每个条目当选中时候的宽度尺寸固定每个tab条目尺寸这样当文案变化的时候就可以保证布局整体不会因为文字大小的改变而抖动问题

代码实现：

                      TabBar(
                        tabs: List.generate(subPage.length, (index) {
                          var str = subPage[index];
                       
                          var tp = TextPainter(textDirection: TextDirection.ltr,text: TextSpan(text: str,style: TextStyle(fontSize: 14,fontWeight: FontWeight.w800,)))..layout();
                          return Tab(
                             // text和child 2选一这里要控制条目尺寸选着使用child 
                             // tab下的文字style 默认会使用DefultTextStyle包裹 所有这里面的Text可以不用再声明style 切换也会自带文字缩放
                            // text: str,
                            child: Container(
                                width: tp.width,
                                child: Text(str)),