Multi-line BottomNavigationBarItem 中的标题

Question

我正在使用 BottomNavigationBarItem 在我的 BottomBar 中显示项目。现在我的问题是，我的 title 的内容太长，无法正确显示。看这里：

是否有关于如何修复它的规范替代方案？还是我必须构建自己的自定义 BottomNavigationBarItem？

非常感谢！

编辑：我的代码（不是很有趣）如下所示：

BottomBar(onTabTapped, currentIndex, context) {
    this.onTap = onTabTapped;
    this.currIndex = currentIndex;

    items = <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.dashboard),
        label: AppLocalizations.of(context).bottomBarDashboard,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        label: AppLocalizations.of(context).bottomBarMyArticles,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.account_circle),
        label: AppLocalizations.of(context).bottomBarProfile,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(elevation: 2.0, selectedItemColor: Theme.of(context).primaryColor, items: items, onTap: onTap, currentIndex:
    currIndex);
  }

Answer 1

您可以使用标题代替标签，尽管它已被弃用。

title:  Flexible(
            child: Text("Meine Premium",
                maxLines: 3),
          ),

Answer 2

选项 1：如果文本是静态的，您可以使用换行符。像第一行 \n 第二行。选项 2。图标可以采用任何小部件，因此您可以在图标中使用一列并使用 icon 和 activeIcon 区分活动和非活动图标并忽略标签。

Answer 3

将RichText与空一起使用label

            RichText(
              textAlign: TextAlign.center,
              text: const TextSpan(
                style: TextStyle(color: Colors.black),
                children: [
                  TextSpan(text: 'Meine\n'),
                  TextSpan(text: 'downloaded-items'),
                ],
              ),
            ),

最终示例：

      BottomNavigationBarItem(
        icon: Column(
          children: [
            const Icon(Icons.save_alt_rounded),
            RichText(
              textAlign: TextAlign.center,
              text: const TextSpan(
                style: TextStyle(color: Colors.black),
                children: [
                  TextSpan(text: 'Meine\n'),
                  TextSpan(text: 'downloaded-items'),
                ],
              ),
            ),
          ],
        ),
        label: '',
      ),

Answer 4

这里我的回答可以帮到你..

selectedLabelStyle: TextStyle(overflow: TextOverflow.visible),

    // make overflow visible if you want approach like shown in image.

// 看这张图。

Multi-line BottomNavigationBarItem 中的标题

Multi-line title in BottomNavigationBarItem

flutter

flutter-bottomnavigation