时间戳

首页 > 解决方案 > Flutter TabBar 指示器所有选项卡的填充

flutter - Flutter TabBar 指示器所有选项卡的填充

问题描述

我想使用 TabBar indicatorPadding 来制作指标，这就是我添加以下代码的原因：

indicatorPadding: EdgeInsets.only(left: 15.0, right: 100.0)

但使用上面的代码，唯一的第一个选项卡显示完美，休息不。请看图片。

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

如何将所有选项卡 indicatorPadding 设置为相同？

下面是我的 TabBar 代码：

TabBar(
      controller: _tabController,
      labelColor: Colors.white,
      labelStyle: TextStyle(
          fontFamily: 'Minion Pro Regular',
          fontWeight: FontWeight.bold,
          fontSize: 15.0),
      indicatorWeight: 2.0,
      indicatorColor: Theme.of(context).primaryColor,
      indicatorSize: TabBarIndicatorSize.tab,      
      indicatorPadding: EdgeInsets.only(left: 15.0, right: 100.0),
      isScrollable: true,
      tabs: <Widget>[
        Tab(
          text: 'Compare transport',
        ),
        Tab(
          text: 'Best price',
        ),
        Tab(
          text: 'Fastest way',
        ),
      ],
    )

标签： flutter

解决方案

这种行为的原因是由于巨大的右填充集：EdgeInsets.only(left: 15.0, right: 100.0).

你可以在这里做的是将两边的填充减少到 32.0。选项卡指示器从 获取其宽度TabBarIndicatorSize.tab。

indicatorPadding: EdgeInsets.only(left: 32.0, right: 32.0)

这样做会导致这种情况。

演示

但是，如果您想设置固定的选项卡指示器大小，则需要创建一个自定义 TabBar。目前您只能将 indicatorSize 设置为TabBarIndicatorSize.tab或TabBarIndicatorSize.label

推荐阅读