Question

所以我有这个flutter应用程序，并且我试图隐藏或删除标题。我尝试将标题保留为空字符串，即public static String get_calling_method_name() { return Thread.currentThread().getStackTrace()[2].getMethodName(); }，但这与导航栏的对齐方式搞混了。

所需结果：

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

：

Answer 1

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

通过Container(height: 0.0)而不是Text("")
创建小部件并使用它而不是Flutter的底部导航。 Source。

Answer 2

到目前为止，该功能尚未实现。对于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),
    ],
  ),
);

Answer 3

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

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

...导致：

Answer 4

一个人可以使用底部导航栏类型移动。

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

Answer 5

使用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)),
            ],
          )
      ),
    );
  }

希望它真的有帮助。

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

Answer 7

SplitArrayField

将在下面为您提供一些额外的填充。您可以使用

title: Container(height: 0.0)

Answer 8

希望此代码段对某人有所帮助。对我来说效果很好。

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

Answer 9

我尝试过这种方法，它的作用就像魅力：

namespace my_first_app_dad
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Totaltimer_Click(object sender, EventArgs e)
        {

        }

        private void Timer1_Tick(object sender, EventArgs e)
        {



        }
    }
}

Answer 10

对我来说效果很好。

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

Answer 11

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

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

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

11 个答案: