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

最新推荐文章于 2023-11-28 15:57:27 发布

HiGson

最新推荐文章于 2023-11-28 15:57:27 发布

阅读量3.9k

点赞数 1

文章标签：组件 flutter

本文链接：https://blog.csdn.net/HiGson/article/details/124372846

版权

场景当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)),
                          );
                        }).toList(),
                        labelPadding: EdgeInsets.symmetric(horizontal: 4),
                        isScrollable: true,
                        indicator: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AexColor.COLOR_0xff02C803),
                        indicatorPadding:
                            EdgeInsets.only(top: 32, bottom: 4),
                        labelStyle: TextStyle(
                            fontSize: 14, fontWeight: FontWeight.w600),
                        unselectedLabelStyle: TextStyle(fontSize: 12),
                        labelColor:
                            Theme.of(context).textTheme.bodyText1?.color,
                        unselectedLabelColor:
                            Theme.of(context).textTheme.caption?.color,
                        controller: _controllerBottomTab,
                      ),
                      height: 40,
                      padding: EdgeInsets.only(left: 15),
                    ),