Jetpack Compose如何适配小屏设备底部导航栏长文本标签

针对你在小屏设备（如Moto G 4.5英寸）上遇到的底部导航栏文本换行挤压图标问题，以下是无需固定字号的跨设备适配方案：

1. 文本溢出处理+固定图标尺寸 #

给文本标签添加溢出省略和行数限制，同时固定图标最小尺寸，避免被挤压：

NavigationBarItem(
    selected = navigationItem.route == currentDestination?.route,
    label = {
        Text(
            text = navigationItem.label,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.widthIn(max = 80.dp) // 限制文本最大宽度，按需调整
        )
    },
    icon = {
        Icon(
            navigationItem.icon,
            contentDescription = navigationItem.label,
            modifier = Modifier.size(24.dp) // 固定图标尺寸，防止被压缩
        )
    },
    onClick = { 
        navController.navigate(navigationItem.route) {
            popUpTo(navController.graph.findStartDestination().id) { saveState = true }
            launchSingleTop = true
            restoreState = true
        }
    }
)

2. 基于屏幕宽度的动态布局逻辑 #

通过LocalConfiguration获取屏幕宽度，小屏时显示短标签或仅显示图标，大屏正常显示：

val configuration = LocalConfiguration.current
val isSmallScreen = configuration.screenWidthDp < 360 // 自定义小屏阈值

NavigationBarItem(
    selected = navigationItem.route == currentDestination?.route,
    label = {
        // 可提前给navigationItem添加shortLabel字段，小屏显示短文本
        Text(if (isSmallScreen) navigationItem.shortLabel else navigationItem.label)
        // 若不想显示文本，直接移除label逻辑即可
    },
    icon = {
        Icon(navigationItem.icon, contentDescription = navigationItem.label)
    },
    onClick = { 
        navController.navigate(navigationItem.route) {
            popUpTo(navController.graph.findStartDestination().id) { saveState = true }
            launchSingleTop = true
            restoreState = true
        }
    }
)

3. 自定义导航项内部布局 #

用Column重新组织图标和文本的布局，通过权重让文本自适应剩余空间，保证图标不被压缩：

NavigationBarItem(
    selected = navigationItem.route == currentDestination?.route,
    label = {}, // 留空，使用自定义内部布局
    icon = {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxHeight()
        ) {
            Icon(
                navigationItem.icon,
                contentDescription = navigationItem.label,
                modifier = Modifier.size(24.dp)
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = navigationItem.label,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier.weight(1f, fill = false) // 文本自适应剩余空间
            )
        }
    },
    onClick = { 
        navController.navigate(navigationItem.route) {
            popUpTo(navController.graph.findStartDestination().id) { saveState = true }
            launchSingleTop = true
            restoreState = true
        }
    }
)

4. 利用Material3自适应文本样式 #

使用Material3内置的labelSmall样式（针对小空间优化），并关联图标与文本的尺寸比例：

val labelStyle = MaterialTheme.typography.labelSmall

NavigationBarItem(
    selected = navigationItem.route == currentDestination?.route,
    label = {
        Text(
            text = navigationItem.label,
            style = labelStyle,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.widthIn(min = 40.dp, max = 80.dp)
        )
    },
    icon = {
        Icon(
            navigationItem.icon,
            contentDescription = navigationItem.label,
            modifier = Modifier.size(labelStyle.fontSize.value * 2) // 图标尺寸与文本字号关联
        )
    },
    onClick = { 
        navController.navigate(navigationItem.route) {
            popUpTo(navController.graph.findStartDestination().id) { saveState = true }
            launchSingleTop = true
            restoreState = true
        }
    }
)

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