如何在Jetpack Compose中不依赖第三方库异步加载网络图片

你当前的代码有几个需要优化的地方，而且展示图片的方式也可以更贴合Compose的最佳实践，下面一步步给你解决：

先说说你代码里的问题 #

• 用GlobalScope启动协程：这玩意儿不受Compose组件的生命周期控制，组件销毁后协程还可能在跑，容易搞出内存泄漏
• 返回MutableState给外部：Compose里更适合在Composable内部管理状态，返回状态会让代码耦合度变高，不好维护
• 没做错误处理：加载出错后啥都不做，用户可能一直看到占位图，体验不好

优化后的完整实现 #

我直接给你封装好一个可复用的Composable，把加载逻辑和UI展示整合在一起，你直接用就行：

@Composable
fun AsyncNetworkImage(
    url: String,
    @DrawableRes placeholderResId: Int,
    @DrawableRes errorResId: Int = placeholderResId,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    // 保存图片状态，用remember确保重组时不会重置
    var imageBitmap by remember { mutableStateOf<ImageBitmap?>(null) }

    // 先加载占位图
    LaunchedEffect(Unit) {
        val placeholderBitmap = BitmapFactory.decodeResource(context.resources, placeholderResId)
        imageBitmap = placeholderBitmap.asImageBitmap()
    }

    // 异步加载网络图片，url变了就重新加载
    LaunchedEffect(url) {
        try {
            val conn = URL(url).openConnection() as HttpURLConnection
            conn.doInput = true
            conn.connect()
            val inputStream = BufferedInputStream(conn.inputStream)
            val bitmap = BitmapFactory.decodeStream(inputStream)
            // 切换到主线程更新状态
            withContext(Dispatchers.Main) {
                imageBitmap = bitmap.asImageBitmap()
            }
        } catch (e: Exception) {
            // 加载失败就显示错误图
            val errorBitmap = BitmapFactory.decodeResource(context.resources, errorResId)
            withContext(Dispatchers.Main) {
                imageBitmap = errorBitmap.asImageBitmap()
            }
        } finally {
            // 断开连接
            (URL(url).openConnection() as? HttpURLConnection)?.disconnect()
        }
    }

    // 拿到图片后展示
    imageBitmap?.let { bitmap ->
        Image(
            painter = BitmapPainter(bitmap),
            contentDescription = null, // 可根据需求添加无障碍描述
            modifier = modifier,
            contentScale = ContentScale.Crop // 可根据需求调整缩放模式
        )
    }
}

怎么用这个组件？ #

在你的界面里直接调用就行，比如：

@Composable
fun DemoScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        AsyncNetworkImage(
            url = "https://your-image-url.com/test.jpg",
            placeholderResId = R.drawable.placeholder_img,
            errorResId = R.drawable.load_error_img,
            modifier = Modifier.size(250.dp)
        )
    }
}

几个关键细节说明 #

• LaunchedEffect：这是Compose官方推荐的协程启动方式，会跟着组件的生命周期走，组件销毁时协程自动取消，彻底避免内存泄漏
• remember：用来保存状态，保证Compose重组的时候不会重新初始化状态值
• ImageBitmap：这是Compose原生支持的图片格式，比直接用Bitmap更适配Compose的UI系统，通过asImageBitmap()就能把原生Bitmap转过去
• 错误处理：加了异常捕获，加载失败时会显示你指定的错误图，用户体验更友好

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