android-jetpack-compose - 即使没有填充整个空间喷气背包，底部导航栏标签也会被剪裁到下一行

Question

如何在不破坏单行的情况下制作图标标签，减小字体大小有帮助但变小使阅读变得困难。

底部导航实现：

    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), // Label
                        fontWeight = FontWeight.SemiBold
                    )
                },
            )
        }
    }

标签： android-jetpack-compose

Answer 1

softWrap在您的文本上使用并将其设置为 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), // Label
                        fontWeight = FontWeight.SemiBold,
                        softWrap = false
                  )
             },
        )
   }
}

注意：BottomNavigation 不可滚动，因此如果导航栏中的项目数量过多，文本将被剪裁在超出选项卡宽度的项目上。这是设计使然。