如何在颤动中降低标签栏的高度答案

【问题标题】：how to reduce height of Tab Bar in flutter如何在颤动中降低标签栏的高度
【发布时间】：2020-04-13 08:22:40
【问题描述】：

我正在使用 Scaffold 显示我的底部选项卡导航器，但它显示得太高，有没有办法减少我的选项卡栏的高度大小。这是代码

Scaffold(
        bottomNavigationBar: Material(
        child: new TabBar(
          tabs: <Widget>[
            Tab(icon: Icon(Icons.home),text: 'Home'),
            Tab(icon: Icon(Icons.settings),text: 'Settings')
          ],
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.grey,
        ),
      ),
        body: TabBarView(
          children: [
            MainScreen(),
            FirstPage(),
          ],
        ),

      )

【问题讨论】：

你为什么不用BottomNavigationBar 而不是TabBar... 我相信TabBar 被设计成放在屏幕顶部
当我使用BottomNavigationBar 时，我的 api 数据总是重新渲染，这就是我使用 Tab Bar 来防止该问题的原因

标签： flutter tabs navigation

【解决方案1】：

您可以将child: new TabBar() 包装在一个容器中。并更改图标和文本的高度。

import 'package:flutter/material.dart';

class MyButtomTabBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          bottomNavigationBar: Material(
            child: Container(
              height: 40,
              child: new TabBar(
                tabs: <Widget>[
                  Tab(
                    icon: Icon(
                      Icons.home,
                      size: 15,
                    ),
                    child: Text(
                      'Home',
                      style: TextStyle(fontSize: 10),
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.settings,
                      size: 15,
                    ),
                    child: Text(
                      'Settings',
                      style: TextStyle(fontSize: 10),
                    ),
                  ),
                ],
                labelColor: Colors.blue,
                unselectedLabelColor: Colors.grey,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：