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

Question

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

Answer 1

如果您不希望选项卡展开以按照默认情况下的方式水平填充屏幕,请TabBar提供属性isScrollable: true.

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

请注意,您也可以使用a Container来设置各个Tabs 的高度,尽管这似乎与您尝试的不同.

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

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

或者您可以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'),
        ],
     ),
);

有关更多自定义选项，请查看此帖子

Answer 3

与这个答案/sf/answers/3099144541/ 一样，最好是使用容器，但我只会使用一个。

对于更改，我将使用底部栏

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)),
        ]
      ),
    )
  ),

截屏