Jetpack Compose BottomNavBar 标签重叠图标

Question

我正在尝试实现 Jetpack Compose 底部导航栏。但是我遇到了这个问题。每当标签不够 space 时，它就会与图标重叠。我错过了什么吗？有没有自动截断或缩小文本的解决方案？

compose_version = '1.0.0-beta09'

我的代码

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            val items = listOf(
                Screen.Profile,
                Screen.FriendsList,
                Screen.Notification,
                Screen.Setting
            )

            Scaffold(
                bottomBar = {
                    BottomNavigation(
                        backgroundColor = MaterialTheme.colors.surface,
                        elevation = 8.dp
                    ) {
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentRoute = navBackStackEntry?.destination?.route
                        items.forEachIndexed { index, screen ->
                            BottomNavigationItem(
                                icon = {
                                    when (index) {
                                        0 -> Icon(Icons.Filled.Person, "Profile")
                                        1 -> Icon(
                                            painterResource(id = R.drawable.ic_friends),
                                            "Friends"
                                        )
                                        2 -> Icon(Icons.Filled.Notifications, "Notification")
                                        else -> Icon(Icons.Filled.Settings, "Settings")
                                    }
                                },
                                label = { Text(stringResource(screen.resourceId)) },
                                selected = currentRoute == screen.route,
                                selectedContentColor = MaterialTheme.colors.primary,
                                unselectedContentColor = Color.Black,
                                onClick = {
                                    navController.navigate(screen.route) {
                                        navController.graph.startDestinationRoute?.let {
                                            popUpTo(it) {
                                                saveState = true
                                            }
                                        }
                                        launchSingleTop = true
                                        restoreState = true
                                    }
                                }
                            )

                        }
                    }
                }
            ) {
                NavHost(navController, startDestination = Screen.Profile.route) {
                    composable(Screen.Profile.route) { Profile(navController) }
                    composable(Screen.FriendsList.route) { FriendsList(navController) }
                    composable(Screen.Notification.route) { FriendsList(navController) }
                    composable(Screen.Setting.route) { FriendsList(navController) }
                }
                
            }
        }
    }

Answer 1

您可以将 属性 maxLines = 1 添加到 label 中使用的 Text:

BottomNavigationItem(
      /* your code */
      label = { Text("Notification",
               maxLines = 1,
               overflow = TextOverflow.Ellipsis) /* optional */
      }
)