Jetpack Compose中使用Coil加载图片的条件渲染异常问题

你的问题核心在于：rememberAsyncImagePainter的加载逻辑依赖Image组件处于Compose组合树中。当你通过if-else分支在加载状态下完全替换掉Image时，Image从未被添加到组合树，Coil的图片加载任务根本没有启动，因此状态会一直停留在Loading。

方法1：使用Coil官方推荐的AsyncImage（最简洁） #

AsyncImage内置了加载、成功、错误状态的处理逻辑，无需手动管理Painter状态，代码更简洁可靠：

AsyncImage(
    model = targetUrl,
    contentDescription = null,
    modifier = Modifier.fillMaxSize(),
    // 直接设置占位资源
    placeholder = painterResource(R.drawable.your_placeholder),
    // 可选：设置错误状态资源
    error = painterResource(R.drawable.your_error_icon)
)

如果需要自定义占位布局（比如用你自己的PlaceHolderComposable），可以使用content参数完全控制状态显示：

AsyncImage(
    model = targetUrl,
    contentDescription = null,
    modifier = Modifier.fillMaxSize(),
    content = { state ->
        when (state) {
            is AsyncImageState.Loading -> PlaceHolderComposable()
            is AsyncImageState.Success -> Image(
                painter = state.painter,
                contentDescription = null,
                modifier = Modifier.fillMaxSize()
            )
            is AsyncImageState.Error -> ErrorComposable() // 可选：自定义错误组件
        }
    }
)

方法2：手动保留Image在组合树中（兼容旧写法） #

如果一定要使用rememberAsyncImagePainter，需要确保Image始终处于组合树内，通过可见性控制显示/隐藏，同时叠加占位组件：

val painter1 = rememberAsyncImagePainter(
    model = targetUrl,
    onSuccess = {
        Log.i("MYTAG", "BasicContentCard: Success!")
    }
)

Box(modifier = Modifier.fillMaxSize()) {
    // Image始终在组合树中，加载完成后显示
    Image(
        painter = painter1,
        contentDescription = null,
        modifier = Modifier.fillMaxSize()
            .visible(painter1.state is AsyncImagePainter.State.Success)
    )
    // 加载/错误状态显示占位
    if (painter1.state !is AsyncImagePainter.State.Success) {
        PlaceHolderComposable()
    }
}

关键原理说明 #

Compose的rememberAsyncImagePainter是绑定组合生命周期的：只有当Painter被Image组件使用（即进入组合树）时，Coil才会触发网络请求并更新状态。之前的if-else写法在加载状态下完全移除了Image，导致加载任务从未执行，状态永远停留在Loading。

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