如何在 flutter 中从底部导航栏中删除标签，以便我可以水平居中我的添加按钮？

Question

谁能帮我解决这个问题。我目前找到的唯一解决方案是将 showSelectedLabels 和 showUnselecedLabels 都设置为 false。然而，这将删除所有标签，但我只想删除添加按钮的标签。如果我只使用占位符“”作为标签，我的添加按钮会偏离水平居中...

button off centered horizontally

the result i want

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: tabs[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 10,
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed,
        selectedIconTheme: IconThemeData(color: kPrimaryMagentaColor),
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.w500),
        selectedItemColor: Colors.black,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.map,
                size: 26.5,
              ),
            ),
            label: 'Map',
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.compass,
                size: 28,
              ),
            ),
            label: 'Discover',
          ),
          BottomNavigationBarItem(
            icon: Container(
              decoration: BoxDecoration(
                color: kPrimaryMagentaColor,
                shape: BoxShape.circle,
              ),
              padding: EdgeInsets.all(10),
              child: Icon(
                FeatherIcons.plus,
                color: Colors.white,
              ),
            ),
            label: "",
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.rotationY(math.pi),
                child: Icon(
                  FeatherIcons.messageSquare,
                  size: 28,
                ),
              ),
            ),
            label: 'Inbox',
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: kBottomNavIconLabelSpace,
              child: Icon(
                FeatherIcons.calendar,
                size: 28,
              ),
            ),
            label: 'My Activity',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );

Answer 1

好的，所以这有点可能通过操纵 Text 的 fontSize.

首先，将您用于每个 BottomNavigationBarItem 的所有 label 更改为使用 title 参数。像这样，

将 label: 'Map' 更改为 title: Text('Map')。同样用你所有的 BottomNavigationBarItem 改变它。因为使用 label 参数是不可能的。

现在，对于你的中心 BottomNavigationBarItem 像这样使用它，

BottomNavigationBarItem(
  icon: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      decoration: BoxDecoration(color: Colors.deepPurple, shape: BoxShape.circle),
      padding: EdgeInsets.all(14),
      child: Icon(Icons.add, color: Colors.white),
    ),
  ),
  title: Text("", style: TextStyle(fontSize: 0)),
),

所以，你正在改变两件事。

将 Container 的 padding 增加到 EdgeInsets.all(14) 以使按钮看起来更大。
使用 style: TextStyle(fontSize: 0) 更改 fontSize，这会使视图不可见。

现在，你有这样的东西，把颜色改成你想要的颜色。

Answer 2

将其添加到 BottomNavigationBar 属性

showSelectedLabels: false,
showUnselectedLabels: false,

Answer 3

如果你使用 2 个参数

showSelectedLabels: false, showUnselectedLabels: false,

和label != ""

你可以获得this issue.

如何在 flutter 中从底部导航栏中删除标签，以便我可以水平居中我的添加按钮？

How can I remove label from bottom navigation bar in flutter so I can center horizontally my add button?

flutter

navigationbar

flutter-bottomnavigation