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

Question

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

Answer 1

如果您不希望选项卡按默认方式水平扩展以填满屏幕，请将 TabBar 设置为 isScrollable: true 的属性。

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

请注意，您还可以使用 Container 来设置单个 Tab 的高度，尽管这看起来不像您想要做的那样。

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('Tabs Demo'),
          bottom: new PreferredSize(
            preferredSize: new Size(200.0, 200.0),
            child: new Container(
              width: 200.0,
              child: new TabBar(
                tabs: [
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'hello'),
                  ),
                  new Container(
                    height: 200.0,
                    child: new Tab(text: 'world'),
                  ),
                ],
              ),
            ),
          ),
        ),
        // body: ...
      ),
    );
  }

}

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

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

Answer 4

您可以调整选项卡之间的间距 -> labelPadding: EdgeInsets.symmetric (水平: 5),

Answer 5

和这个回答一样，最好是用容器，但我只会用一个。

为了改变，我将使用底栏

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 6

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

Answer 7

appBar: new AppBar(
        title: Text("TabBar demo"),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: Align(
            alignment: Alignment.centerLeft,
            child: new TabBar(
              controller: _tabController,
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 3.0, color: Colors.red),
                insets: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
              ),
              indicatorSize: TabBarIndicatorSize.label,
              isScrollable: true,
              onTap: (index) {
                print(index);
                _currentIndex = index;
                setState(() {});
              },
              tabs: [
                new Container(
                  height: 50.0,
                  width: 80,
                  // color: Colors.red,
                  child: new Tab(text: '1'),
                ),
                new Container(
                  height: 50.0,
                  width: 80,
                  // color: Colors.red,
                  child: new Tab(text: '222'),
                ),
                new Container(
                  height: 50.0,
                  width: 80,
                  // color: Colors.red,
                  child: new Tab(text: '333333'),
                ),
              ],
            ),
          ),
        ),
      ),
      // body: ...
    );

Answer 8

您可以使用属性 toolbarHeight

AppBar(
toolbarHeight: 50.0,
)

Answer 9

尝试在 TabBar 中执行此操作

                  indicatorWeight: 0,
                  indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                      width: 0.1,
                      color: AppColor.themeColor,
                    ),

Answer 10

您可以border-radius设计下划线指示器，指示器的长度根据文本容器的长度来设计。

child: TabBar(
    indicatoenter code herer: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: widgetBlueColor,
    ),
    indicatorPadding: const EdgeInsets.only(top: 33, bottom: 2),
    labelColor: widgetBlueColor,
    unselectedLabelColor: Colors.black87,
    labelPadding: const EdgeInsets.only(bottom: 16),
    indicatorSize: TabBarIndicatorSize.label,
    labelStyle: const TextStyle(fontWeight: FontWeight.w500),
    tabs: const [
        Tab(
            child: SizedBox(
                width: 60,
                child: Text(
                    "DETAILS",
                    textAlign: TextAlign.center,
                ),
            ),
        ),
        Tab(
            child: SizedBox(
                width: 85,
                child: Text(
                    "DOCUMENTS",
                    textAlign: TextAlign.center,
                ),
            )
        )
    ]
)

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

How can I customize the TabBar indicator width and height?

dart

flutter