当前位置：首页 > article >正文

Compose 定制UI视图

article 2025/2/22 3:29:11

Compose 定制UI视图

概述
MaterialTheme
MaterialTheme与CompositionLocal
- MaterialTheme
- CompositionLocal
定制主题方案

概述

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

Color.kt：颜色配置，使用Color(ARGB)
Type.kt：字体配置，使用FontFamily(Font)
Shape.kt：形状配置, 使用xxShape，如 RondedCornerShape
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可以有效提高性能。

定制主题方案

配置颜色
通过 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,
        )
    }
}