Jetpack Compose：如何获取与当前模式不符的Drawable图片变体

API 探路者

2026-6-24

实现指定模式的Drawable预览

要在Jetpack Compose里同时展示同一资源的日间和夜间模式变体，核心思路是创建对应模式的Resources实例，再通过它获取目标资源ID，具体步骤如下：

1. 封装获取指定模式资源的工具方法

先写一个上下文扩展函数，生成对应日间/夜间模式的Resources：

fun Context.getResourcesForDarkMode(isDark: Boolean): Resources {
    val newConfig = configuration.copy()
    newConfig.uiMode = if (isDark) {
        Configuration.UI_MODE_NIGHT_YES
    } else {
        Configuration.UI_MODE_NIGHT_NO
    }
    return createConfigurationContext(newConfig).resources
}

2. 获取对应模式的资源ID

用上面的方法拿到指定模式的Resources后，通过资源名称获取ID：

// 获取日间模式资源ID
val lightRes = context.getResourcesForDarkMode(isDark = false)
val lightImageId = lightRes.getIdentifier(
    "my_image", // 资源文件名（不带后缀）
    "drawable",
    context.packageName
)

// 获取夜间模式资源ID
val darkRes = context.getResourcesForDarkMode(isDark = true)
val darkImageId = darkRes.getIdentifier(
    "my_image",
    "drawable",
    context.packageName
)

3. 在Compose中加载并展示

拿到ID后直接用painterResource加载，就能实现并排预览：

Row(modifier = Modifier.fillMaxWidth()) {
    Image(
        painter = painterResource(lightImageId),
        contentDescription = "日间背景预览",
        modifier = Modifier.weight(1f).aspectRatio(1f)
    )
    Spacer(modifier = Modifier.width(8.dp))
    Image(
        painter = painterResource(darkImageId),
        contentDescription = "夜间背景预览",
        modifier = Modifier.weight(1f).aspectRatio(1f)
    )
}