Как выровнять элементы TabBar в флаттере? - PullRequest
Новая
       9

Как выровнять элементы TabBar в флаттере?

1 голос
/ 15 января 2020

У меня есть вкладка / панель навигации с тремя вариантами. Однако значки в нем не выровнены посередине. Значки выглядят выровненными на других устройствах, но не на iPhone. По какой-то причине они немного подталкиваются вверх. 

  Widget _bottomNavigationBar(int selectedIndex) => 
        Container(
            height: 90,
                decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(52.0),
                  topRight: Radius.circular(52.0)),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black.withOpacity(0.5),
                  offset: Offset(-5, 5),
                  blurRadius: 20,
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(52.0),
                  topRight: Radius.circular(52.0)),
              child: BottomNavigationBar(
                selectedItemColor: Color(0xFFFE524B),
                unselectedItemColor: Color(0xFFFF8C3B),
                onTap: (int index) => setState(() => _selectedIndex = index),
                currentIndex: selectedIndex,
                items: const <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.home,
                        size: 28,
                      ),
                      title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.game_controller,
                        size: 28,
                      ),
                      title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.wallet,
                        size: 28,
                      ),
                      title: Text('')),
                ],
              ),
            ));

Спасибо за помощь!

1 Ответ

2 голосов
/ 15 января 2020

Это происходит из-за «заголовка» в нижней панели навигации. По сути это рендеринг виджета Текст с пустой строкой. Не рассматривается как пустой, но занимает место.

Хорошо, что свойство title в классе BottomNavBar принимает виджет, поэтому вы можете передать ему любой виджет.

I ' Я предлагаю передать виджет Padding с нулевым заполнением или, возможно, контейнер с нулевой высотой. Реализация может выглядеть следующим образом: 

BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.home,
                        size: 28,
                      ),
                      title: Padding(padding: EdgeInsets.all(0.0))),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.game_controller,
                        size: 28,
                      ),
                      title: Padding(padding: EdgeInsets.all(0.0))),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.wallet,
                        size: 28,
                      ),
                      title: Padding(padding: EdgeInsets.all(0.0))),
                ],
              ),
...