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

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐