如何在颤振中从底部导航栏中移除标签，以便使我的添加按钮水平居中？

Question

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

以水平方向关闭按钮

我想要的结果

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的所有BottomNavigationBarItem更改为使用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)),
),

所以，你改变了两件事。

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

现在，你有这样的东西，改变颜色到任何你想要的。

​

​

Answer 2

将其添加到BottomNavigationBar属性中

showSelectedLabels: false,
showUnselectedLabels: false,

Answer 3

您需要添加BottomNavigationBar()：

BottomNavigationBar(iconSize: 40,
   showSelectedLabels: false, //selected item
   showUnselectedLabels: false, //unselected item
   ...
);