如何减少颤振中标签栏的高度

时间:2020-04-13 08:22:40

标签: flutter tabs navigation

我正在使用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(),
          ],
        ),

      )

1 个答案:

答案 0 :(得分:1)

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

enter image description here

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