Flutter底部导航栏长文本不换行：如何适配拉伸容器？

当前实现效果 #

现有代码 #

return Row(
  children: menuItems
      .asMap()
      .entries
      .map(
        (x) => Expanded(
          child: Container(
            decoration: const BoxDecoration(
              color: HGVColors.grey,
            ),
            child: InkWell(
              onTap: () => setTitle(x.key),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SvgPicture.asset(
                    "assets/images/${x.value.icon}.svg",
                    height: 25,
                    color: getColor(x.key == currentIndex),
                  ),
                  Text(
                    x.value.label,
                    style: TextStyle(
                      color: getColor(x.key == currentIndex),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      )
      .toList(),
);

期望实现效果 #

问题需求 #

如何修改代码，让“Konventionen”文本不换行，同时拉伸其所在容器？

修改方案 #

当前问题核心是Expanded给所有菜单项均分宽度，导致长文本容器空间不足被迫换行。可通过以下两种方式调整：

方式一：为长文本项分配更高宽度权重

用Flexible替代统一的Expanded，给长文本项设置更大的flex值，确保其有足够空间展示完整文本：

return Row(
  children: menuItems
      .asMap()
      .entries
      .map(
        (x) {
          final isLongText = x.value.label == "Konventionen";
          return Flexible(
            flex: isLongText ? 2 : 1, // 长文本项占2份宽度，其他项各占1份
            child: Container(
              decoration: const BoxDecoration(
                color: HGVColors.grey,
              ),
              child: InkWell(
                onTap: () => setTitle(x.key),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset(
                      "assets/images/${x.value.icon}.svg",
                      height: 25,
                      color: getColor(x.key == currentIndex),
                    ),
                    Text(
                      x.value.label,
                      style: TextStyle(
                        color: getColor(x.key == currentIndex),
                      ),
                      softWrap: false, // 强制文本不换行
                      overflow: TextOverflow.visible,
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      )
      .toList(),
);

方式二：让容器随文本自适应宽度

如果希望长文本容器完全贴合文本宽度，同时其他项均分剩余空间，可单独处理长文本项：

return Row(
  children: menuItems
      .asMap()
      .entries
      .map(
        (x) {
          final isLongText = x.value.label == "Konventionen";
          if (isLongText) {
            return Container(
              decoration: const BoxDecoration(
                color: HGVColors.grey,
              ),
              child: InkWell(
                onTap: () => setTitle(x.key),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset(
                      "assets/images/${x.value.icon}.svg",
                      height: 25,
                      color: getColor(x.key == currentIndex),
                    ),
                    Text(
                      x.value.label,
                      style: TextStyle(
                        color: getColor(x.key == currentIndex),
                      ),
                      softWrap: false,
                    ),
                  ],
                ),
              ),
            );
          } else {
            return Expanded(
              child: Container(
                decoration: const BoxDecoration(
                  color: HGVColors.grey,
                ),
                child: InkWell(
                  onTap: () => setTitle(x.key),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SvgPicture.asset(
                        "assets/images/${x.value.icon}.svg",
                        height: 25,
                        color: getColor(x.key == currentIndex),
                      ),
                      Text(
                        x.value.label,
                        style: TextStyle(
                          color: getColor(x.key == currentIndex),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          }
        },
      )
      .toList(),
);

关键改动说明 #

• 给Text组件添加softWrap: false，强制禁止文本换行；
• 通过flex权重或自适应布局，为长文本项分配足够的容器宽度；
• 若采用自适应方式，需确保其他菜单项用Expanded填满Row剩余空间，避免布局溢出。

内容的提问来源于stack exchange，提问作者Emaborsa