как уменьшить высоту Tab Bar в флаттере - PullRequest
0 голосов
/ 13 апреля 2020

Я использую 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 Ответ

1 голос
/ 13 апреля 2020

Вы можете обернуть 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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...