Compose主题

Compose 中的 Material Design 2 | Jetpack Compose | Android Developers

androidx.compose.material3 | Android Developers

创建主题资源

1. 进入Material Design

2. 选择品牌颜色，即Primary Color，也是种子颜色

3. 点击右上角Export按钮，选择Jetpack Compose(Theme.kt)，下载主题文件并放入项目包下

4. 配置主题，引入颜色，字体，形状等预定义元素

   示例：

   @Composable
   fun CokoToolsTheme(
       darkTheme: Boolean = isSystemInDarkTheme(), // 深色主题
       dynamicColor: Boolean = true, // 动态取色（Android12+）
       content: @Composable () -> Unit // 这里就是主题作用域
   ) {
       val cokeToolsColorScheme = when {
           dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
               val context = LocalContext.current
               if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
           }
           darkTheme -> DarkColors
           else -> LightColors
       }
   
       MaterialTheme(
           colorScheme = cokeToolsColorScheme,
           shapes = cokoToolsShapes,
           typography = cokoToolsTypography,
           content = content
       )
   }

   实际上，就是替换默认主题MaterialTheme里的元素。

使用主题资源

首先，将使用自定义主题的内容放在主题作用域中：

示例：在MainActivity.kt的setContent中放入我们的主题可组合项，并在其作用域内放入HomeScreen可组合项

setContent {
    CokoToolsTheme {
        HomeScreen()
    }
}

然后就可以在作用域内使用预定义资源：

• 使用颜色：

  color = MaterialTheme.colorScheme.primary

• 使用字体

  style = MaterialTheme.typography.titleLarge

• 使用形状

  shape = MaterialTheme.shapes.large