如何在 flutter 中对齐 TabBar 的元素？

Question

我有一个包含三个选项的 tab/navigation 栏。然而，其中的图标没有在中间对齐。这些图标在其他设备上看起来是对齐的，但在 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('')),
                ],
              ),
            ));

感谢您的帮助！

Answer 1

这是因为底部导航栏中的 'title'。基本上它是渲染一个带有空字符串的文本小部件。不认为它是空的，但它采用 space.

好在 BottomNavBar class 中的标题属性带有一个小部件，因此，您可以将任何小部件传递给它。

我建议传递一个零填充的 Padding 小部件，或者一个零高度的 Container。实现如下所示：

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))),
                ],
              ),

如何在 flutter 中对齐 TabBar 的元素？

How do I align the elements of the TabBar in flutter?

user-interface

flutter

dart

uitabbar

user-experience