flutter BottomNavigationBarItem中的多行标题

vlf7wbxs 于 2022-11-25 发布在 Flutter

关注(0)|答案(5)|浏览(183)

我正在使用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);
  }

flutter

来源：https://stackoverflow.com/questions/68649162/multi-line-title-in-bottomnavigationbaritem

5条答案

按热度按时间

k4emjkb11#

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

赞(0）回复(0）举报 2022-11-25

ybzsozfc2#

将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: '',
      ),

赞(0）回复(0）举报 2022-11-25

iyr7buue3#

在这里我的答案可以帮助你..
selectedLabelStyle: TextStyle(overflow: TextOverflow.visible),

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

//查看此图像。x1c 0d1x

赞(0）回复(0）举报 2022-11-25

mrzz3bfm4#

我自己写了一个包，叫做Responsive_Bottom_Bar，它可以缩放标题的文本大小，并且使用多行标题。
https://pub.dev/packages/responsive_bottom_bar
您可以像这样使用它：

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: Text("hello world: $currentIndex"),
          bottomNavigationBar: ResponsiveBottomBar(
              items: const [
                BottomBarItem(
                    title: "This is a very long title Yooo",
                    iconData: Icons.add_box),
                BottomBarItem(
                    title: "Wer sich",
                    iconData: Icons.share),
                BottomBarItem(
                    title: "jetzt noch",
                    iconData: Icons.star_rate),
                BottomBarItem(
                    title: "umdreht ist",
                    iconData: Icons.library_add),
                BottomBarItem(
                    title: "selber schuld :)",
                    iconData: Icons.pages_rounded),
              ],
              currentIndex: currentIndex,
              onTap: (int index) {
                setState(() {
                  currentIndex = index;
                });
              })),
    );
}

赞(0）回复(0）举报 2022-11-25

yr9zkbsy5#

您可以使用title代替label，尽管它已过时。

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

赞(0）回复(0）举报 2022-11-25

我来回答

flutter BottomNavigationBarItem中的多行标题

5条答案

相关问题

热门标签

最新问答