Jetpack Compose底部导航标签未占满空间就换行，如何实现单行显示？

问题原因 #

Jetpack Compose Material 库的Text组件默认支持多行折行显示，且BottomNavigationItem为标签预留的宽度有限，当标签文字长度超出分配的宽度阈值时就会自动换行，不需要缩小字号也可以通过配置组件属性解决。

方案1：强制标签单行显示，溢出内容处理 #

给label参数中的Text组件新增单行限制和溢出规则即可，溢出内容可以选择显示省略号或者直接截断：

BottomNavigation(backgroundColor = Color.White) {
    items.forEach { item ->
        BottomNavigationItem(
            selected = currentRoute == item.route,
            onClick = { /*TODO*/ },
            icon = {
                if (currentRoute == item.route) ActiveIcon(item.activeIcon)
                else Icon(painterResource(item.disableIcon), null)
            },
            label = {
                Text(
                    stringResource(item.title),
                    fontWeight = FontWeight.SemiBold,
                    // 强制单行显示
                    maxLines = 1,
                    // 溢出显示省略号，不需要省略号可替换为 TextOverflow.Clip 直接截断
                    overflow = TextOverflow.Ellipsis
                )
            },
        )
    }
}

方案2：仅选中项显示标签（符合Material Design规范） #

如果你的底部导航标签普遍较长，可开启BottomNavigationItem的alwaysShowLabel = false属性，未选中的导航项仅展示图标，只有当前选中的项才会显示标签，既避免换行问题也符合官方设计规范：

BottomNavigation(backgroundColor = Color.White) {
    items.forEach { item ->
        BottomNavigationItem(
            selected = currentRoute == item.route,
            onClick = { /*TODO*/ },
            icon = {
                if (currentRoute == item.route) ActiveIcon(item.activeIcon)
                else Icon(painterResource(item.disableIcon), null)
            },
            label = {
                Text(
                    stringResource(item.title),
                    fontWeight = FontWeight.SemiBold,
                    maxLines = 1
                )
            },
            // 未选中状态隐藏标签
            alwaysShowLabel = false
        )
    }
}

补充方案（可选） #

如果你要求所有导航项始终显示标签，也可以给Text配置自适应字号，根据选中状态动态调整字体大小，兼顾可读性和显示需求：

Text(
    stringResource(item.title),
    fontWeight = FontWeight.SemiBold,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    // 选中时字号14sp，未选中时12sp，可根据需求调整
    fontSize = if (selected) 14.sp else 12.sp
)

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