Compose定制UI视图

Compose 定制UI视图 概述MaterialThemeMaterialTheme与CompositionLocalMaterialThemeCompositionLocal 定制主题方案

概述

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

Color.kt：颜色配置，使用Color(ARGB)Type.kt：字体配置，使用FontFamily(Font)Shape.kt：形状配置, 使用xxShape，如 RondedCornerShapeTheme.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可以有效提高性能。 定制主题方案 配置颜色 通过 lightColors 和 darkColors 配置两套配色版，在视图需要Color的地方调用相应颜色即可。配置字体 字体通过第二个参数 tpography 进行配置，tpography 的构建需要用到 Type.kt，最终将 tpography 提供给 LocalTpography这个 CompositionLocal，在Text组件配置 style 接可以了配置形状 在 Compose 中可以使用 RoundedCornerShape 来表示圆角信息，如下 val shapes = Shapes( small = RoundedCornerShape(4.dp), medium = RoundedCornerShape(4.dp), large = RoundedCornerShape(0.dp) ) 配置自定义资源 有时根据主题不同使用不同的多媒体资源，如 图片，视频，音频等。可以通过 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 LightWelcomeAssets CompositionLocalProvider( LocalWelcomeAssets provides welcomeAssets ) { MaterialTheme(colors = if (theme == BloomTheme.DARK) BloomDarkColorPalette else BloomLightColorPalette, typography = bloomTypoGraphy, shapes = shapes, content = content, ) } }

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