Coil Jetpack 撰写时不显示图像

Question

我面临的问题是在 if 块中。

if (imageState is AsyncImagePainter.State.Error) 

此行抛出错误不兼容类型：AsyncImagePainter.State.Error 和 AsyncImagePainter 我不知道该怎么办。我是 kotlin 和 android 开发新手 这是我的代码

@Composable
fun Product(product: Product) {
    val imageState = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current).data(product.thumbnail)
            .size(Size.ORIGINAL).build()
    )

    Column(
        modifier = Modifier
            .clip(RoundedCornerShape(20.dp))
            .height(300.dp)
            .fillMaxWidth()
            .background(MaterialTheme.colorScheme.primaryContainer)
    ) {

        if (imageState is AsyncImagePainter.State.Error) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp),
                contentAlignment = Alignment.Center
            ) {
                CircularProgressIndicator()
            }
        }

        if (imageState is AsyncImagePainter.State.Success) {
            Image(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp),
                painter = imageState.painter,
                contentDescription = product.title,
                contentScale = ContentScale.Crop
            )
        }

        Spacer(modifier = Modifier.height(6.dp))

        Text(
            modifier = Modifier.padding(horizontal = 16.dp),
            text = "${product.title} -- Price: ${product.price}$",
            fontSize = 17.sp,
            fontWeight = FontWeight.SemiBold
        )

        Spacer(modifier = Modifier.height(6.dp))

        Text(
            modifier = Modifier.padding(horizontal = 16.dp),
            text = product.description,
            fontSize = 13.sp,
        )
    }
}

我尝试观看不同的 YouTube 教程以及线圈文档，但我很难遵循这些文档

Answer 1

虽然您将变量命名为

imageState

，但其类型是

AsyncImagePainter

而不是

AsyncImagePainter.State

。

只需检索

state

属性并进行比较，然后就可以开始了：

if (imageState.state is AsyncImagePainter.State.Error) {
    // ...
}