Compose 定制UI视图

概述

新建一个新项目时，Compose会在项目中生成 ui/theme 目录，目录中有四个文件，分别如下

1. Color.kt：颜色配置，使用Color(ARGB)
2. Type.kt：字体配置，使用FontFamily(Font)
3. Shape.kt：形状配置, 使用xxShape，如 RondedCornerShape
4. Theme.kt：主题配置，包括全局的 颜色，字体，形状及拓展配置

MaterialTheme

Compose 基于 Material Design 的主题样式模版，通过主题样式模版的配置，整个应用的 Coposable 组件会随主题切换实现相应样式改变。

查看源码，发现默认生成了两种配色的调色板（Light 和Dark），根据传入的 布尔值 选择不同的调色板。

MaterialTheme与CompositionLocal

MaterialTheme

MaterialTheme本身是一个 Coposable 组件，同时还有个 同名的单例对象。，进入MaterialTheme 源码，我们可以看到CompositionLocal 的身影，通过 providers 将 rememberedColors 提供给了 LocalColors。
同时，我们使用的时候，通过 MaterialTheme 单例对象，间接从 LocalColors 中获取到值。

internal val LocalColors = staticCompositionLocalOf { lightColors() }

通过 LocalColors 定义可知是一个CompositionLocal，初始值是lightColor()返回的Colors配置。MaterialTheme方法中通过CompoisitionLocalProvider方法为Composable提供了一些CompositionLocal，这其中就包含了所有的主题配置信息。

CompositionLocal

Compose提供了两种创建CompositionLocal实列的方式，分别是compositionLocalOf与staticCompositionLocalOf.

• compositionLocalOf：当使用compositionLocalOf来创建CompositionLocal时，如果所提供的值是一个状态，那么当状态发生更新的时候，所有读取这个CompositionLocal内部current数值的Composable都会发生重组。
• staiticCompositionLocalOf：使用staticCompositionLocalOf创建CompositionLocal实例，那么当状态发生更新时，CompositionLocalProvider的current整体会重组，而不仅仅是在Composable中读取其内部current数值的部分。
• compositionLocalOf会记录使用其内部current的所有Composable，由于记录Composable是有成本的，所以官方建议如果CompositionLocal提供的值发生变化的可能性很小或者是一个永远不会改变的确定值，那么使用staticCompositionLocalOf可以有效提高性能。

定制主题方案

1. 配置颜色
   通过 lightColors 和 darkColors 配置两套配色版，在视图需要Color的地方调用相应颜色即可。
2. 配置字体
   字体通过第二个参数 tpography 进行配置，tpography 的构建需要用到 Type.kt，最终将 tpography 提供给 LocalTpography这个 CompositionLocal，在Text组件配置 style 接可以了
3. 配置形状
   在 Compose 中可以使用 RoundedCornerShape 来表示圆角信息，如下

val shapes = Shapes(small = RoundedCornerShape(4.dp),medium = RoundedCornerShape(4.dp),large = RoundedCornerShape(0.dp)
)

4. 配置自定义资源
   有时根据主题不同使用不同的多媒体资源，如 图片，视频，音频等。可以通过 CompositionLocal 扩展。示例如下：

open class WelcomePageAssets(var background:Int,var illos:Int,var logo:Int)//亮色主题资源
object LightWelcomeAssets : WelcomePageAssets(background = R.drawable.ic_light_welcome_bg,illos = R.drawable.ic_light_welcome_illos,logo = R.drawable.ic_light_logo
)// 暗色主提资源
object DarkWelcomeAssets : WelcomePageAssets(background = R.drawable.ic_dark_welcome_bg,illos = R.drawable.ic_dark_welcome_illos,logo = R.drawable.ic_dark_logo
)internal var LocalWelcomeAssets = staticCompositionLocalOf { LightWelcomeAssets as WelcomePageAssets }val welcomeAssets
@Composable
@ReadOnlyComposable
get() = LocalWelcomeAssets.current@Composable
fun GoogleBloomTheme(theme:BloomTheme = BloomTheme.LIGHT,content:@Composable ()->Unit){val welcomeAssets = if(theme == BloomTheme.DARK) DarkWelcomeAssets else LightWelcomeAssetsCompositionLocalProvider(LocalWelcomeAssets provides welcomeAssets) {MaterialTheme(colors = if (theme == BloomTheme.DARK)BloomDarkColorPalette else BloomLightColorPalette,typography = bloomTypoGraphy,shapes = shapes,content = content,)}
}

@ReadOnlyComposable时可选的，我们可以对有返回值的 Composable 使用此注解，
使得 Composable 失去局部重组的能力，
从而达到编译优化的效果。