Flutter - 如何隐藏/删除 BottomNavigationBarItem 的标题答案

【问题标题】：Flutter - How to hide/remove title of BottomNavigationBarItemFlutter - 如何隐藏/删除 BottomNavigationBarItem 的标题
【发布时间】：2018-09-05 10:01:12
【问题描述】：

所以我有这个颤振应用程序，我正在尝试隐藏或删除标题。我尝试将标题保留为空字符串，即new Text("")，但这与导航栏的对齐方式混淆了。

期望的结果：

我得到了什么（如果我将标题保留为空字符串）：

:

【问题讨论】：

标签： dart flutter

【解决方案1】：

此问题有两种解决方法，因为此功能尚未实现。

传递Container(height: 0.0) 而不是Text("")
创建小部件并使用它来代替 Flutter 的底部导航。 Source。

更新：

只需将其添加到您的 BottomNavigationBar

showSelectedLabels: false,
showUnselectedLabels: false,

【讨论】：

Container(height:0.0) 东西不起作用。和我使用 Text("") 的时候一样
Container(height: 0.0) 完美运行，当我添加 Text("") 时，出现溢出错误。但是使用 Container() 错误消失了
或者您也可以在 BottomNavigationBarItem 中使用title: SizedBox.shrink() 属性

【解决方案2】：

现在您可以简单地禁用选定或未选定项目的标签：

bottomNavigationBar: BottomNavigationBar(
  showSelectedLabels: false,   // <-- HERE
  showUnselectedLabels: false, // <-- AND HERE
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text('Personal')
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.notifications),
      title: Text('Notifications'),
    ),
  ]
  ...
)

...导致：

【讨论】：

title 现在已被弃用，这与标签完美配合！

【解决方案3】：

希望这个 sn-p 可以帮助某人。对我来说效果很好。

bottomNavigationBar : new BottomNavigationBar(
      items: [
      BottomNavigationBarItem(
        icon: Icons.search,
        title: Padding(padding: EdgeInsets.all(0))
      ),
      BottomNavigationBarItem(
        icon: Icons.share,
        title: Padding(padding: EdgeInsets.all(0))
      ),
      BottomNavigationBarItem(
        icon: Icons.call,
        title: Padding(padding: EdgeInsets.all(0))
      )],
     type: BottomNavigationBarType.fixed
) 
//bottomNavBar

【讨论】：

谢谢，没有这个项目会显示不好

【解决方案4】：

截至目前，该功能尚未实现。对于BottomNavigationBarItem，标题是必填字段

但是您可以为此构建一个新的小部件。

试试这个：

Column buildButtonColumn(IconData icon) {
 Color color = Theme.of(context).primaryColor;

  return Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(icon, color: color),
    ],
  );
}

Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      buildButtonColumn(Icons.call),
      buildButtonColumn(Icons.near_me),
      buildButtonColumn(Icons.share),
    ],
  ),
);

【讨论】：

【解决方案5】：

我已经尝试过这种方法，效果很好：

BottomNavigationBarItem(
  icon: Icon(
    Icons.home,
    size: 40,
  ),
  title: Text(
    "",
    style: TextStyle(fontSize: 0),
  ),
)

【讨论】：

【解决方案6】：

在新版本的flutter中，title是贬值的，我们必须提供label。因此，将标签设为空字符串

          BottomNavigationBarItem(
            label: '',
            icon: Icon(
              Icons.home_rounded,
              color: kHintColor,
              size: 35,
            ),
            activeIcon: Icon(
              Icons.home_rounded,
              color: kMainColor,
              size: 35,
            ),
          ),

并将以下内容添加到 BottomNavigationBar：

        selectedLabelStyle: TextStyle(fontSize: 0),
        unselectedLabelStyle: TextStyle(fontSize: 0),

【讨论】：

【解决方案7】：

对我来说效果很好。

BottomNavigationBarItem(
  icon: Icon(
    Icons.home,
  ),
  title: SizedBox.shrink(),
)

【讨论】：

请在投反对票前解释清楚。它可能对你不起作用，但对我有用。

【解决方案8】：

使用BottomAppBar 来实现这个不带标签的BottomNavigationBarItem。您可以进一步自定义它。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: body,
      bottomNavigationBar: new BottomAppBar(
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                  icon: Icon(Icons.home),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 0
                      ? null
                      : () => setState(() => _currentIndex = 0)),
              IconButton(
                  icon: Icon(Icons.notifications),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 1
                      ? null
                      : () => setState(() => _currentIndex = 1)),
              IconButton(
                  icon: Icon(Icons.settings),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 2
                      ? null
                      : () => setState(() => _currentIndex = 2)),
            ],
          )
      ),
    );
  }

希望它真的有帮助。

【讨论】：

【解决方案9】：

title: Container(height: 0.0)

下面会给你一些额外的填充。你可以使用

title: Text(
      '',
      style: TextStyle(fontWeight: FontWeight.bold, height: 0.0),
)

【讨论】：

【解决方案10】：

可以使用底部导航栏类型来移动。

  bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.shifting,
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.star, color: Colors.red,), title: Text("")),
        BottomNavigationBarItem(icon: Icon(Icons.star, color: Colors.red,), title: Text(""))
      ]
  ),

【讨论】：

你的意思是BottomNavigationBarType.fixed，不是吗？

【解决方案11】：

要显示没有任何标签的图标，以下步骤对我有用：设置 selectedFontSize: 0 并将标签设置为空字符串。例如，

BottomNavigationBar(
      selectedFontSize: 0,
      items: BottomNavigationBarItem(
                icon: Icons.search
                label: '',
              ),
)

【讨论】：