如何在Jetpack Compose中根据屏幕尺寸全局设置文本大小？

我的应用原本使用如下Typography配置，运行正常：

val Typography = Typography(
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Light,
        fontSize = 18.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.5.sp,
        hyphens = Hyphens.Auto,
        lineBreak = LineBreak.Paragraph
    )
)

现在我添加了不同屏幕尺寸的支持（val windowSize = calculateWindowSizeClass(this)），需要根据当前屏幕尺寸调整应用中的文本大小。

目前我会为每个Text组件判断屏幕尺寸并设置对应大小，这种方式效率低下且工作量大，示例如下：

...
val fontSize = when(windowSize.widthSizeClass) {
        WindowWidthSizeClass.Compact -> 14.sp
        WindowWidthSizeClass.Medium -> 16.sp
        WindowWidthSizeClass.Expanded -> 18.sp
        else -> 14.sp
}

Text(text = "Some text...", fontSize = fontSize)
...

有没有高效的方式可以为应用内所有Text组件全局设置文本大小？

1. 提取通用样式模板 #

先把重复的样式属性抽出来，避免冗余代码：

private fun baseTextStyle(fontSize: TextUnit, lineHeight: TextUnit) = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.Light,
    fontSize = fontSize,
    lineHeight = lineHeight,
    letterSpacing = 0.5.sp,
    hyphens = Hyphens.Auto,
    lineBreak = LineBreak.Paragraph
)

2. 动态生成适配屏幕的Typography #

在应用的主题可组合函数中，根据窗口尺寸类生成对应的Typography配置：

@Composable
fun AppTheme(
    windowSizeClass: WindowSizeClass,
    content: @Composable () -> Unit
) {
    val typography = when(windowSizeClass.widthSizeClass) {
        WindowWidthSizeClass.Compact -> Typography(
            // 紧凑屏用小字号
            bodyLarge = baseTextStyle(14.sp, 20.sp),
            // 按需补充其他文本样式
            bodyMedium = baseTextStyle(12.sp, 18.sp)
        )
        WindowWidthSizeClass.Medium -> Typography(
            // 中等屏用中字号
            bodyLarge = baseTextStyle(16.sp, 22.sp),
            bodyMedium = baseTextStyle(14.sp, 20.sp)
        )
        WindowWidthSizeClass.Expanded -> Typography(
            // 扩展屏用大字号
            bodyLarge = baseTextStyle(18.sp, 24.sp),
            bodyMedium = baseTextStyle(16.sp, 22.sp)
        )
        // 默认 fallback 到紧凑屏样式
        else -> Typography(
            bodyLarge = baseTextStyle(14.sp, 20.sp)
        )
    }

    MaterialTheme(
        typography = typography,
        // 这里可以添加主题的配色、形状配置
        content = content
    )
}

3. 全局应用主题并使用样式 #

在应用入口传入窗口尺寸类，然后所有Text组件直接引用主题中的样式即可：

// 应用入口示例
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val windowSizeClass = calculateWindowSizeClass(this)
            AppTheme(windowSizeClass = windowSizeClass) {
                // 应用内容
                ExampleScreen()
            }
        }
    }
}

// 页面组件示例
@Composable
fun ExampleScreen() {
    Text(
        text = "Some text...",
        // 直接用主题样式，自动适配屏幕
        style = MaterialTheme.typography.bodyLarge
    )
}

方案优势 #

• 全局统一适配：所有使用主题样式的Text组件会自动跟随屏幕尺寸调整，不用逐个修改
• 维护成本低：样式调整只需修改baseTextStyle或Typography生成逻辑，一次修改全局生效
• 符合Compose设计规范：利用主题系统实现样式的集中管理，逻辑清晰

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