第 23 课：Compose 共享图片资源

知识点

在 commonMain 中使用 Compose Multiplatform 的共享图片资源。

用途

Logo、插图和图标等跨平台一致的图片只维护一份，Android 与 iOS 界面都通过生成的 Res 访问它们。

核心概念

将图片放入 commonMain/composeResources/drawable/。
构建项目后，资源名会生成到 Res.drawable。
在共享 Composable 中使用 painterResource() 加载图片。
文件名使用小写字母、数字和下划线，例如 app_logo.png。

示例代码

先添加图片：

text

composeApp/src/commonMain/composeResources/drawable/app_logo.png

然后在共享 UI 中显示它：

kotlin

import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import org.jetbrains.compose.resources.painterResource
import your.project.generated.resources.Res
import your.project.generated.resources.app_logo

@Composable
fun AppLogo() {
    Image(
        painter = painterResource(Res.drawable.app_logo),
        contentDescription = "KMP logo",
    )
}

请将示例中的 your.project.generated.resources 替换为项目实际生成的资源包名。

5 分钟练习

把 contentDescription 也改成上一课学过的共享字符串资源，资源键命名为 logo_description。

参考答案

资源文件：

xml

<resources>
    <string name="logo_description">应用 Logo</string>
</resources>

Composable：

kotlin

import org.jetbrains.compose.resources.stringResource
import your.project.generated.resources.logo_description

Image(
    painter = painterResource(Res.drawable.app_logo),
    contentDescription = stringResource(Res.string.logo_description),
)

与上一课的联系

上一课把文案放进 composeResources；今天沿用同一套资源系统管理图片，并用共享字符串描述图片的无障碍含义。

参考资料

Compose Multiplatform resources usage