为什么当我在 Compose 中使用 ImagePainter.State.Success 时，临时图像一直显示？

Question

以下代码A来自官方样本project.

我认为代码A是错误的，我认为这行有两张图片，左边的图片是加载时显示的真实图片，右边的图片是加载时显示的临时图片正在加载真实图像。

所以我用代码 B 替换了代码 A。

但实际上 UI 首先显示一个名为 ic_crane_logo 的临时图像，然后显示真实图像，正如我在运行代码 A 时所预期的那样。 UI当我运行代码 B.

时一直显示温度 iamge

我的思路和代码有什么问题？

代码A

Row(
    modifier = modifier
        .clickable { onItemClicked(item) }
        .padding(top = 12.dp, bottom = 12.dp)
) {      
    ExploreImageContainer {
        Box {
            val painter = rememberImagePainter(
                data = item.imageUrl,
                builder = {
                    crossfade(true)
                }
            )
            Image(
                painter = painter,
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize(),
            )

            if (painter.state is ImagePainter.State.Loading) {
                Image(
                    painter = painterResource(id = R.drawable.ic_crane_logo),
                    contentDescription = null,
                    modifier = Modifier
                        .size(36.dp)
                        .align(Alignment.Center),
                )
            }
        }
    }
  ...
}

代码B

   Row(
        modifier = modifier
            .clickable { onItemClicked(item) }
            .padding(top = 12.dp, bottom = 12.dp)
    ) {

       ExploreImageContainer {
             Box {
                val painter = rememberImagePainter(
                    data = item.imageUrl,
                    builder = {
                        crossfade(true)
                    }
                )

                if (painter.state is ImagePainter.State.Success){
                    Image(
                        painter = painter,
                        contentDescription = null,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize(),
                    )
                }else{
                    Image(
                        painter = painterResource(id = R.drawable.ic_crane_logo),
                        contentDescription = null,
                        modifier = Modifier
                            .size(36.dp)
                            .align(Alignment.Center),
                    )
                }
            }
        }
        ...
    }

Answer 1

rememberImagePainter 没有开始加载图像。

它仅在相应的 Image 添加到视图树并具有 non-zero 维度时启动。

只要不加载，Image就是一个透明视图，将它从视图树中移除不会带来性能提升，所以部分代码A完全正确。

为什么当我在 Compose 中使用 ImagePainter.State.Success 时，临时图像一直显示？

Why doest a temp image keep to display when I use ImagePainter.State.Success in Compose?

kotlin

android-jetpack-compose

coil