Compose Multiplatform库共享资源在Web/iOS端无法加载的问题

核心原因 #

1. iOS平台限制：iOS原生不支持Android的xml格式Drawable资源，直接引用会无法解析。
2. Wasm平台资源打包缺失：库的Gradle配置未确保资源被正确复制到Web构建的输出目录中。
3. 跨平台资源格式兼容性：不同平台对资源格式支持不同，xml Drawable仅在Android/Desktop（JVM）环境下有效。

具体修复步骤 #

1. 替换xml Drawable为跨平台兼容格式 #

把icon_xy.xml这类Android专属的Drawable转换成SVG格式，或者直接用Compose的ImageVector代码定义矢量图标：

• 转SVG：用工具将xml Drawable转为SVG后，放到src/commonMain/resources/icons/目录下。
• 用ImageVector：参考Compose官方矢量图标定义方式，直接在代码里编写图标逻辑，彻底摆脱资源文件依赖。

修改后的Image引用示例（以SVG为例）：

Image(
    painter = painterResource("icons/icon_xy.svg"),
    contentDescription = "Loading Animation",
    modifier = modifier.graphicsLayer(rotationZ = rotation.value),
    contentScale = ContentScale.Fit
)

2. 修正库的Gradle资源配置 #

在库的build.gradle.kts中，确保所有平台的sourceSet都正确关联资源目录：

kotlin {
    sourceSets {
        val commonMain by getting {
            resources.srcDirs("src/commonMain/resources")
        }
        // 关联iOS平台资源目录
        val iosMain by getting {
            resources.srcDirs("src/commonMain/resources")
        }
        // 关联Wasm平台资源目录
        val wasmJsMain by getting {
            resources.srcDirs("src/commonMain/resources")
        }
    }
}

3. 配置iOS平台的资源打包 #

在库的cocoapods配置中，确保资源被嵌入到生成的Framework中：

cocoapods {
    // ... 现有配置保留
    framework {
        baseName = "ComposeApp"
        isStatic = true
        // 开启资源嵌入
        embedResources = true
    }
    // 明确指定资源路径
    podspec {
        resources = listOf("src/commonMain/resources/**/*")
    }
}

4. 配置Wasm平台的资源复制 #

在库的wasmJs配置中，添加Webpack资源复制规则，确保资源被打包到Web输出目录：

wasmJs {
    browser()
    binaries.executable()
    commonWebpackConfig {
        // 复制资源到Web构建目录
        copy {
            from("src/commonMain/resources")
            into("resources")
        }
    }
}

5. 验证应用端依赖 #

示例应用的build.gradle.kts中已经添加了compose.components.resources依赖，只需确保其版本和库中使用的版本一致即可。

验证步骤 #

1. 重新构建库，本地引用或发布到Maven仓库
2. 运行iOS和Web应用，检查资源是否正常加载

内容的提问来源于stack exchange，提问作者philip