如何给标签栏中的标签一定的高度

Question

我正在尝试在显示已选择和未选择的标签的颤动中为标签栏实现此结果，我的问题是我无法为标签提供一定的高度，你能帮我吗。

THIS IS MY CODE

我想实现这个

`

Answer 1

Tab自带height属性，可以用来给tab提供高度

Tab( height: 100,...)

If height is null, the height will be calculated based on the content of the Tab. When icon is not null along with child or text, the default height is 72.0 pixels. Without an icon, the height is 46.0 pixels.

Answer 2

请检查我的例子


 Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
            appBar: AppBar(),
            body: SingleChildScrollView(
                child: Column(children: [
              TabBar(
                tabs: [
                  Container(
                      width: 200,
                      height: 200,
                      color: Colors.amber,
                      child: Icon(Icons.directions_car)),
                  Container(
                      width: 200,
                      height: 200,
                      color: Colors.black,
                      child: Icon(Icons.directions_transit)),
                  Container(
                      width: 200,
                      height: 200,
                      color: Colors.red,
                      child: Icon(Icons.directions_bike)),
                ],
              ),
              Container(
                  height: 500,
                  width: MediaQuery.of(context).size.width,
                  child: TabBarView(
                    children: [
                      Icon(Icons.directions_car),
                      Icon(Icons.directions_transit),
                      Icon(Icons.directions_bike),
                    ],
                  ))
            ]))));
}

这里不要在 TabBar 中使用 Tab 小部件，因为它有一些默认属性，而不是在标签栏中使用 Tab ，使用 Container

像这样

        TabBar(
                tabs: [
                  Container(
                      width: 200,
                      height: 200,
                      color: Colors.amber,
                      child: Icon(Icons.directions_car)),
                  Container(
                      width: 200,
                      height: 200,
                      color: Colors.black,
                      child: Icon(Icons.directions_transit)),
                  Container(
                      width: 200,
                      height: 200,
                      color: Colors.red,
                      child: Icon(Icons.directions_bike)),
                ],
              ),

使用这种方式，你可以实现它，如果你想改变颜色等等......根据TabController和index

的选择使用索引

并且 TabBar 的所有属性也将以这种方式工作

输出将是

Answer 3

你必须根据你对 MediaQuery 的要求设置选项卡的高度

如何给标签栏中的标签一定的高度

How to give a certain high to tab in tab bar

flutter

flutter-layout

tabbar