如何自定义TabBar指示器的宽度和高度？ [英] How can I customize the TabBar indicator width and height?

问题描述

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

解决方案

为您的 TabBar 赋予 isScrollable属性：true 如果您不希望标签页扩展为默认情况下的水平填充屏幕。

您可以使用容器包裹在 PreferredSize 中，以调整 TabBar 的大小。 （ PreferredSize 仅在您希望它位于的底部插槽中时才是必需的。 AppBar 。）这会导致指示器变窄，因为 TabBar 不会填满屏幕。但是，指示器具有硬编码的高度。如果您不喜欢它，则必须导入自己的

  import'package：flutter /material.dart'; 
 
 
 void main（）{
 runApp（new MaterialApp（
 home：new MyApp（），
））; 
} 
 
 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new DefaultTabController （
长度：2，
子代：新的Scaffold（
 appBar：新的AppBar（
标题：new Text（'Tabs Demo'），
底部：new PreferredSize （
 preferredSize：new Size（200.0，200.0），
 child：new Container（
 width：200.0，
 child：new TabBar（
 tabs：[
新容器（
高度：200.0，
儿童：new Tab（文本：'hello'），
），
新容器（
高度：200.0， 
孩子：new Tab（text：'world'），
），
]，
），
），
），
 ），
 //正文：... 
）， 
）; 
} 
 
} 
  

I'm using a TabBar widget and I'd like to customize the height and width of the indicator. I can't see any other property besides color I can modify.

解决方案

Give your TabBar a property of isScrollable: true if you don't want the tabs to expand to fill the screen horizontally the way they do by default.

You can use a Container wrapped in a PreferredSize to size the TabBar. (The PreferredSize is only necessary if you want it to live in the bottom slot of an AppBar.) This has the effect of making the indicators appear narrower because the TabBar doesn't fill the screen. However, the indicator has a hard coded height. If you don't like it, you'll have to import your own copy of tabs.dart and customize the constants in that file.

Note that you can also use a Container to set the height of the individual Tabs, although that doesn't seem like what you're trying to do.

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: ...
      ),
    );
  }

}

这篇关于如何自定义TabBar指示器的宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！