Compose Multiplatform中如何使用Drawable资源？

嘿，我之前在做Compose Multiplatform项目的时候，刚好研究过怎么在Android和iOS上共用PNG资源，给你分享下实际操作的步骤，亲测好使～

一、传统平台各自放置的方式（适合需要单独定制的场景） #

如果你暂时想按平台各自管理资源，可以这么做：

• Android端：
  把不同分辨率的PNG资源放到Android模块的对应目录里，结构如下：

  androidApp/src/main/res/
      drawable-mdpi/icon.png
      drawable-hdpi/icon.png
      drawable-xhdpi/icon.png
      drawable-xxhdpi/icon.png
      drawable-xxxhdpi/icon.png
  

  之后在Compose代码里，直接用painterResource(id = R.drawable.icon)就能加载，Android系统会自动根据设备的分辨率匹配对应清晰度的图。

• iOS端：
  要是单独给iOS配置资源，需要把PNG拖进iOS模块的Assets.xcassets里（在Xcode里操作更直观），不过这种方式就没法和Android共用资源文件了，所以更推荐下面的共用方案。

二、共用资源目录的更优方案（强烈推荐！） #

想要Android和iOS共用同一套PNG资源，咱们可以把文件统一放到Common模块的资源目录里，一步搞定两边的加载：

1. 先在commonMain下创建对应的资源目录，结构参考这样：

   commonMain/resources/
       drawables/
           icon.png          // 基础分辨率图（对应Android mdpi、iOS 1x）
           icon@2x.png       // 2倍分辨率（对应Android xhdpi、iOS 2x）
           icon@3x.png       // 3倍分辨率（对应Android xxhdpi/xxxhdpi、iOS 3x）
   

   这种@2x、@3x的命名方式，iOS会自动识别分辨率，Android这边Compose也能完美适配，不用额外做配置。
2. 然后在Common模块的Compose代码里，直接调用painterResource("drawables/icon.png")就能加载资源了，不管是在Android还是iOS上运行，都能自动匹配到最合适分辨率的图。

小提示 #

• 尽量给每个资源准备不同分辨率的版本，这样在高低配设备上都能显示清晰，避免出现拉伸模糊的情况。
• 如果项目里能用SVG矢量图的话，其实更省心——不用做多分辨率版本，Compose Multiplatform也支持直接加载，不过你问的是PNG，这里就不多啰嗦啦～

内容来源于stack exchange