Flutter 中未显示 BottomNavigationBar 标题答案

【问题标题】：BottomNavigationBar title not showing in FlutterFlutter 中未显示 BottomNavigationBar 标题
【发布时间】：2019-08-14 10:16:11
【问题描述】：

为什么底部导航栏标题不显示？它应该显示在图标下方

class FlutterProject extends StatefulWidget {
  final String title = "Flutter Bottom Tab demo";

  @override
  GoalsListState createState() {
    return GoalsListState();
  }
}

class GoalsListState extends State<FlutterProject>
    with SingleTickerProviderStateMixin {
  int _cIndex = 0;

  void _incrementTab(index) {
    setState(() {
      _cIndex = index;
    });
  }

  final List<Widget> _children = [
    new One(),
    new Two(),
    new Three(),
    new Four(),
    new More()
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: _children[_cIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _cIndex,
          type: BottomNavigationBarType.shifting,
          items: [
            BottomNavigationBarItem(
                icon:
                    Icon(Icons.graphic_eq, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('One')),
            BottomNavigationBarItem(
                icon: Icon(Icons.report_problem,
                    color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Two')),
            BottomNavigationBarItem(
                icon: Icon(Icons.work, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Three')),
            BottomNavigationBarItem(
                icon: Icon(Icons.domain, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Four')),
            BottomNavigationBarItem(
                icon: Icon(Icons.menu, color: Color.fromARGB(255, 0, 0, 0)),
                title: new Text('Five')),
          ],
          onTap: (index) {
            _incrementTab(index);
          },
        ));
  }
}

我错过了什么？

【问题讨论】：

标签： flutter android-bottomnavigationview

【解决方案1】：

当提供超过 3 个 BottomNavigationBar 项时，如果未指定类型，则根据 https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html 更改为 BottomNavigationBarType.shifting。这部分信息应该在课程的文档中突出显示。很容易忽略它在哪里（我忽略了它）。

添加类型：BottomNavigationBarType.fixed on BottomNavigationBar

BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   items: <BottomNavigationBarItem>[],
)

【讨论】：

【解决方案2】：

项的长度必须至少为两个，并且每个项的图标和标题不得为空。

如果 type 为 null，则当有两个或三个项目时使用 BottomNavigationBarType.fixed，否则使用 BottomNavigationBarType.shifting。

如果您想每次都显示标题，请添加类型：BottomNavigationBarType.fixed, 这样做

 bottomNavigationBar: BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   currentIndex: _page,
   items: tabsList,
 )

如果您只想在“已选择”选项卡上显示标题，请像这样添加到 showSelectedLabels: true, 和 showUnselectedLabels: false,，

 bottomNavigationBar: BottomNavigationBar(
   type: BottomNavigationBarType.fixed,
   showSelectedLabels: true,
   showUnselectedLabels: false,
   currentIndex: _page,
   items: tabsList,
 )

【讨论】：

【解决方案3】：

标题确实显示了，但如果仔细观察，它的颜色是white。只需在文本中添加color 即可正常显示。

title: new Text('One', style: TextStyle(color: Colors.black))

【讨论】：

谢谢，不点击怎么让文字出现？
你有type: BottomNavigationBarType.shifting,。如果将其更改为fixed，则默认显示文本。
@Darshan 如何获取底部导航栏的选定标题？？

【解决方案4】：

你应该使用这个代码：

bottomNavigationBar: BottomNavigationBar(
//use both properties
   type: BottomNavigationBarType.fixed,
   showUnselectedLabels: true,
//-----------
    items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.icon1),
      label:'item 1',
   ),
   BottomNavigationBarItem(
     icon: Icon(Icons.icon2),
     label: 'item 2',
   ),
 ],
)

【讨论】：

【解决方案5】：

这是显示导航栏项目标签的简单技巧

 BottomNavigationBarItem(
            icon: Column(
              children: [
                new Icon(widget.currentTab == 2 ? Icons.dashboard_outlined : Icons.dashboard_outlined),
                Text("Homes")
              ],
            ),
            label: 'Home',

          ),

【讨论】：