flutter TabBar 下划线样式

Widget _tabBar() {

    return TabBar(

      controller: _tabController,

      tabs: tabs.map((e) => _tab(e)).toList(),

      labelPadding: EdgeInsets.zero,

      isScrollable: true,

      unselectedLabelColor: ColorStyle.swordsColor, 

      unselectedLabelStyle: TextStyle(fontWeight: FontWeight.w400), 

      labelColor: ColorStyle.titleColor,

      labelStyle: TextStyle(fontWeight: FontWeight.bold),

      // indicator: BoxDecoration(),

      indicatorColor: ColorStyle.appColor, // 下划线颜色

      indicatorWeight: 2, // 下划线大小

      indicatorPadding: EdgeInsets.symmetric(horizontal: 23),  // 可以根据每个tab的宽度设置padding来调整下划线的宽度

    );

  }


下划线默认是和tab宽度一样宽的，想要减少他的宽度，可以设置 indicatorPadding属性，比如tab宽100，设计图上下划线宽20，可以设置indicatorPadding为  （100-20）/2，也就是40  EdgeInsets.symmetric(horizontal: 40)

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容