如何检测 ImagePainter 何时使用 Jetpack Compose 从 Web 加载照片？

Question

我想通过 URL 链接显示网络图片。我想显示进度条直到加载图像，然后隐藏进度条并显示图像。 如何检测画家何时加载图像？

HorizontalPager(count = photoUrlList.size, state = photoPagerState) { page ->
    var shouldBeProgressBarDisplayed by mutableStateOf(true)

    val painter = rememberImagePainter(photoUrlList[page], builder = {
        this.listener(
            onSuccess = { request, ex ->
                shouldBeProgressBarDisplayed = false
            })
    })

    if (shouldBeProgressBarDisplayed) {
        ProgressBar()
    } else {
        Image(
            painter = painter,
            modifier = Modifier
                .padding(vertical = 100.dp)
                .fillMaxSize(),
            contentScale = ContentScale.Crop,
            contentDescription = ""
        )
    }
}

Answer 1

您可以使用 painter.state 来实现此目的

HorizontalPager(count = photoUrlList.size, state = photoPagerState) { page ->
Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(vertical = 100.dp)
) {
    val painter = rememberImagePainter(
        data = photoUrlList[page],
        builder = {
            crossfade(500)
    })

    val painterState = painter.state

    if (painterState is ImagePainter.State.Loading) {
        CircularProgressIndicator(
            modifier = Modifier.align(Alignment.Center),
            color = MaterialTheme.colors.secondary
        )
    } else {
        Image(
            painter = painter,
            modifier = Modifier
                .fillMaxSize(),
            contentScale = ContentScale.Crop,
            contentDescription = ""
        )
    }
}
}