如何自定义TabBar指标宽度和高度？

Question

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

Answer 1

给你TabBar的isScrollable: true的属性，如果你不想要的选项卡扩展以填充屏幕水平，他们在默认情况下做的方式。

您可以使用包裹在PreferredSize中的Container来确定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: ... 
    ), 
    ); 
    } 

}