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

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

您可以使用包装在PreferredSize中的Container来调整TabBar的大小.(仅当您希望PreferredSize位于AppBar的bottom插槽中时，才需要使用PreferredSize.)这会使指示器看起来更窄，因为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: ...
      ),
    );
  }

}