美文网首页
Flutter 设置Tabbar底部滑块的大小及位置

Flutter 设置Tabbar底部滑块的大小及位置

作者: 黑炭长 | 来源:发表于2021-06-08 10:35 被阅读0次

    我们先看一下设计图给出的效果


    设计图效果

    设置滑块高度和宽度官方给的属性是

    indicatorSize: TabBarIndicatorSize.label,// tab || label
    indicatorWeight: sw(8),
    

    这两个属性只能设置滑块的高度和 长度是跟随文字还是tab的宽度

    如何设置圆角和固定宽度的滑块呢

    1、广大网友给的的方法多数是改源码,例如
    这一篇

    2、其实官方的属性已经给我们提供了方法

    indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(2),
              color: Color.fromRGBO(255, 221, 107, 1)),
    indicatorPadding: EdgeInsets.only(left: 30, right: 40, top: 45),
    

    设置之后的效果


    亲测效果

    此两个属性配合使用即可达到圆角和固定大小的效果,最好是每个tab的名称字数相同

    扩展===隐藏滑块只需设置

    indicator: BoxDecoration(),
    

    相关文章

      网友评论

          本文标题:Flutter 设置Tabbar底部滑块的大小及位置

          本文链接:https://www.haomeiwen.com/subject/pjpmxftx.html