Compose Multiplatform 之旅 — 图标、图片展示（coil）

在app 开发过程中，本地图标展示和网络图片加载都是必不可少的，那Compose Multiplatform项目中，是如何展示本地图标和加载网络图片的呢？

想了解更多Compose Multiplatform项目的小伙伴，可以看看之前的文章

本地图标展示

1.将图片移到资源路径下

在commonMain->composeResources->drawable 放入你的本地图片

2.执行一下Build->Make Project

生成对应的代码，其他地方能够引用到。如果你添加了资源，但是没有对应的drawable ，就需要执行一下这个操作

3.使用对应的drawable

直接通过生成的资源类，就可以引用到本地的图标了。

ini 复制代码

Image(  
    painter = painterResource(Res.drawable.dog),  
    contentDescription = "小狗"  
)

网络图片加载

对于框架的选择，我们还是使用之前推荐的 klibs.io ，搜image 关键字，找到了一个破万star的开源项目coil。全 Kotlin 实现，API 也更简洁。

仓库地址：github.com/coil-kt/coi...

依赖引入

在commonMain 模块引入依赖。注意这里使用的网络库是ktor，所以也引入了 coil-network-ktor3，另外ktor 的版本和coil 是有一个对应关系，我之前用的是低版本的ktor , coil 图片就加载不出来。

scss 复制代码

commonMain.dependencies {  
  
    implementation("io.coil-kt.coil3:coil-compose:3.0.4")  
    implementation("io.coil-kt.coil3:coil-network-ktor3:3.0.4")  
}

图片加载

通过AsyncImage，设置model = ${url} 就可以加载图片了。

less 复制代码

@Composable  
fun ImageGrid() {   
    val imageUrls = listOf(  
        "https://picsum.photos/300/300?random=1",  
        "https://picsum.photos/300/300?random=2",  
        "https://picsum.photos/300/300?random=3",  
        "https://picsum.photos/300/300?random=4",  
        "https://picsum.photos/300/300?random=5",  
        "https://picsum.photos/300/300?random=6",  
        "https://picsum.photos/300/300?random=7",  
        "https://picsum.photos/300/300?random=8",  
        "https://picsum.photos/300/300?random=9"  
    )  
  
    LazyVerticalGrid(  
        columns = GridCells.Fixed(3), 
        modifier = Modifier.fillMaxSize(),  
        state = rememberLazyGridState(),  
        verticalArrangement = Arrangement.spacedBy(4.dp),  
        horizontalArrangement = Arrangement.spacedBy(4.dp)  
    ) {  
        items(imageUrls) { url ->  
            AsyncImage(  
                model = url,  
                contentDescription = null,  
                modifier = Modifier  
                    .aspectRatio(1f)   
                    .padding(4.dp)  
                    .background(Color.Gray),  
                contentScale = ContentScale.Crop   
			)  
        }  
    }
}

展示效果

回调监听

可以通过onSuccess，onError，onLoading获取到图片加载过程中的回调。我之前因为ktor 低版本加载不出来，排查问题就是通过onError发现了不能加载的原因。通过升级ktor 版本号到3.0.0解决了该问题。

ini 复制代码

AsyncImage(  
    model = "https://picsum.photos/300/300",  
    contentDescription = null,  
    modifier = Modifier  
        .aspectRatio(1f) // 保持正方形  
        .padding(4.dp)  
        .background(Color.Blue),  
    onSuccess = { result ->  
        println("图片加载成功")  
    },  
    onError = { result ->  
        println("错误原因: ${result}")  
    },  
    onLoading = {  
        println("图片加载中...")  
    },  
    contentScale = ContentScale.Crop // 图片裁剪填充  
)

结语

目前app开发大部分场景的问题也都介绍了，有想了解compose multiplatform 什么特性的，可以提出来，我们一起学习，共同进步。后续也会用一些实战项目，结合之前提到的一些东西，继续探索compose multiplatform 。