“如何使用GlideImage获取列表中加载成功的图片数量？”

Question

我有一个字符串列表，我在其中存储网络图像，稍后我会在 forEach 循环中迭代这些网络图像，并且在其中，我有 GlideImage 可组合项，它允许我确定图像是否已正确加载。但是，当我添加一个变量来跟踪正确加载了多少图像时，计数器永远不会停止。

fun ImageLoader() {
    val urls = listOf(
        "https://www.example.com/image1.jpg",
        "https://www.example.com/image2.jpg",
        "https://www.example.com/image3.jpg",
        "https://www.example.com/image1.jpg",
    )
    val successfulImageCount = remember { mutableStateOf(0) }

    Column(modifier = Modifier.fillMaxSize()) {
        urls.forEach { url ->
            GlideImage(
                imageModel = { url },
                success = { status: GlideImageState.Success, image: Painter ->
                    successfulImageCount.value++
                    Image(painter = image, contentDescription = "")
                },
                modifier = Modifier.size(80.dp),
            )
        }

        Text(text = "Images uploaded correctly: ${successfulImageCount.value}")
    }
}

Answer 1

要解决更新计数器导致 ImageLoader 重新组合（进而重新组合 GlideImage）、再次更新计数器并导致无限循环的问题，您可以使用副作用在每次图像加载时仅更新计数器一次。方法如下：

@Composable
fun ImageLoader() {
    val urls = listOf(
        "https://www.example.com/image1.jpg",
        "https://www.example.com/image2.jpg",
        "https://www.example.com/image3.jpg",
        "https://www.example.com/image1.jpg",
    )
    val successfulImageCount = remember { mutableStateOf(0) }

    Column(modifier = Modifier.fillMaxSize()) {
        urls.forEach { url ->
            GlideImage(
                imageModel = { url },
                success = { status: GlideImageState.Success, image: Painter ->
                    // Use a side-effect to increment the counter only once per image load
                    DisposableEffect(key1 = url) {
                        successfulImageCount.value++
                        onDispose { }
                    }
                    Image(painter = image, contentDescription = "")
                },
                modifier = Modifier.size(80.dp),
            )
        }

        Text(text = "Images uploaded correctly: ${successfulImageCount.value}")
    }
}