如何自定义TabBar指示器的宽度和高度？

Question

我正在使用TabBar小部件，我想自定义指标的高度和宽度。除了我可以修改的颜色外，我看不到任何其他属性。

Answer 1

如果您不希望标签展开以便按照默认情况下的方式水平填充屏幕，则为TabBar属性isScrollable: true提供。

您可以使用Container中包含的PreferredSize来确定TabBar的大小。 （PreferredSize只有在您希望它位于bottom的{​​{1}}位置时才有必要。）这会使指标显得更窄，因为AppBar没有填满屏幕。但是，指示器具有硬编码高度。如果您不喜欢它，则必须导入自己的tabs.dart副本并自定义该文件中的常量。

请注意，您也可以使用TabBar来设置单个Container的高度，但这似乎与您尝试的不同。

Tab

Answer 2

您可以在TabBar上使用indicatorSize: TabBarIndicatorSize.label来使指示器的大小与标签相同。

或者您可以直接设置indicator，这是您可以自定义的Decoration：

AppBar(
    bottom: TabBar(
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0),
          insets: EdgeInsets.symmetric(horizontal:16.0)
        ),
        tabs: [
          Tab(text: 'tab 1'),
          Tab(text: 'tab 2'),
          Tab(text: 'tab 3'),
        ],
     ),
);

有关更多自定义选项，请选中此post

Answer 3

与此答案https://stackoverflow.com/a/44273493/5938089相同，最好是使用容器，但我只会使用一个。

要进行更改，我将使用底部的栏

bottomNavigationBar: new Material(
    color: Colors.teal,
    child: new Container(
      height: 60.0,
      child: new TabBar(
        controller: controller,
        tabs: <Widget>[
            new Tab(icon: new Icon(Icons.access_alarm)),
            new Tab(icon: new Icon(Icons.account_balance)),
        ]
      ),
    )
  ),

Screen Shot

Answer 4

您可以调整标签之间的间距-> labelPadding：EdgeInsets.symmetric（水平：5），

Answer 5

查看 Tab Indicator Styler 包以获得更高级的样式。

Answer 6

您可以使用属性TabBar(indicatorWeight:detail Height)。