在jetpack compose项目中使用 Material - 传奇开心果 - 沸点 - 掘金

程序员

#每天一个知识点#
在jetpack compose项目中使用 Material Design 来设置应用的样式最简短示例代码和解读

在 Jetpack Compose 中，Material Design 样式的核心入口是 `MaterialTheme`。它通过 `colorScheme`、`typography`、`shapes` 三个参数统一提供设计令牌，所有 Material 组件会自动消费这些值。

```kotlin
@Composable
fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme()
MaterialTheme(
colorScheme = colorScheme,
typography = Typography(),
shapes = Shapes(),
content = content
)
}
```

解读：`colorScheme` 决定全局语义颜色（`primary`、`surface`、`error` 等），传入 `darkColorScheme()` 或 `lightColorScheme()` 即可切换明暗。`typography` 定义从 `displayLarge` 到 `labelSmall` 的完整字阶，`shapes` 则控制组件的圆角规格，二者留空默认值即沿用 Material 3 基准体系。将 `AppTheme { ... }` 包在界面最外层后，内部的 `Button`、`Card`、`Text` 会自动读取当前主题，无需手动逐项传参。若需 Android 12+ 动态取色，可在 `colorScheme` 分支中加入 `dynamicLightColorScheme(context)` / `dynamicDarkColorScheme(context)`，降级回退到静态方案即可。

展开

技术交流圈

赞过