Jetpack Compose默认主题下文本重叠问题的原因及解决方法

使用Jetpack Compose开发Android应用，界面仅包含一个Text组件。启用自定义主题CalaulatorTheme时文本出现重叠，移除主题后显示恢复正常。

UI代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
        setContent {
            CalaulatorTheme {
                Box(modifier = Modifier.fillMaxSize().background(MediumGray).padding(16.dp)) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .align(Alignment.BottomCenter),
                        verticalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        Text(
                            text = "12345678901233445568256",
                            textAlign = TextAlign.End,
                            modifier = Modifier
                                .fillMaxSize()
                                .background(Color.Magenta)
                                .padding(vertical = 8.dp),
                            fontWeight = FontWeight.Light,
                            fontSize = 60.sp,
                            color = Color.White,
                            maxLines = 2
                        )
                    }
                }
            }
        }
    }
}

主题代码 #

@Composable
fun CalaulatorTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

现象截图 #

问题根源在于自定义主题中传入的Typography配置不完整：你定义的Typography大概率缺少了行高（lineHeight）的合理设置。

当没有主题包裹时，Compose会使用内置的默认排版参数，其中为不同字号预设了合适的行高；而自定义主题的Typography如果未配置行高，Text组件会仅依据fontSize进行布局，文本换行后上下行的间距被压缩至几乎为0，最终导致重叠。

提供两种可行的修复方式，可根据需求选择：

方案1：完善主题的全局Typography配置 #

在主题代码中，定义包含合理行高的完整Typography实例，示例如下：

// 定义完整的排版配置，可根据需求调整
private val Typography = Typography(
    // 基础文本样式
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp
    ),
    // 为大字号文本单独配置（匹配你的Text组件字号）
    displayLarge = TextStyle(
        fontSize = 60.sp,
        lineHeight = 72.sp, // 设置比fontSize稍大的值，保证行间距
        fontWeight = FontWeight.Light
    )
    // 其他排版样式（如headlineSmall、titleMedium等）可按需补充
)

修改后，CalaulatorTheme中的MaterialTheme继续使用该Typography即可。

方案2：为单个Text组件显式设置lineHeight #

如果不需要全局修改排版，直接在出问题的Text组件中添加lineHeight参数：

Text(
    text = "12345678901233445568256",
    textAlign = TextAlign.End,
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Magenta)
        .padding(vertical = 8.dp),
    fontWeight = FontWeight.Light,
    fontSize = 60.sp,
    lineHeight = 72.sp, // 新增行高配置，值略大于fontSize即可
    color = Color.White,
    maxLines = 2
)

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