如何自定義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: ... 
    ), 
    ); 
    } 

}