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

场景 当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),
                    ),