Загрузка локальных чертежей с помощью Coil Compose

Question

Я недавно перешел из Концерна. ImagePainterк Coil , ниже приведен соответствующий код после моих обновлений.

      val painter = rememberImagePainter(DRAWABLE_RESOURCE_ID)

when (painter.state) {
    is ImagePainter.State.Empty -> Timber.w("Empty")
    is ImagePainter.State.Loading -> {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier.wrapContentSize()
        ) {
            CircularProgressIndicator()
        }
    }
    is ImagePainter.State.Success -> {
        Image(
            painter = painter,
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .padding(8.dp)
                .size(84.dp)
                .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
        )
    }
    is ImagePainter.State.Error -> Timber.e("Error")
}

Теперь эти изображения не отображаются и painter.stateвсегда пусто . Моя прежняя реализация «Аккомпанемент» отображала изображения к этому моменту в коде. Так же работает, если я использую сток painterResource(resId) из Compose.

Что мне не хватает для исполнения нового Coil painter через его состояния?

Answer 1

Вы можете использовать идентификатор ресурса drawable в качестве модели для компоновки AsyncImage катушки.

      AsyncImage(
    model = R.drawable.bg_gradient,
    contentDescription = "Gradient background",
)

Существует значительная разница в производительности между составными компонентами -ImageиAsyncImage. Так что загрузка CoilAsyncImage иногда очень удобна.

Answer 2

Как предложил @Philip Dukhov, вам не нужна катушка для загрузки локальных ресурсов.

Если вы хотите его использовать, вы можете просто использовать свой код, используя:

      val painter = rememberImagePainter(R.drawable.xxx)
val state = painter.state
Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.wrapContentSize()
) {
    AnimatedVisibility(visible = (state is ImagePainter.State.Loading)) {
        CircularProgressIndicator()
    }
    Image(
        painter = painter,
        contentDescription = null,
        modifier = Modifier.size(128.dp)
    )
}

Answer 3

Катушка для загрузки локальных ресурсов не нужна. Вы можете использовать систему painterResource:

      Image(
    painter = painterResource(id = R.drawable.test),
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .padding(8.dp)
        .size(84.dp)
        .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
)

---

Если вы используете его для удаления загрузки изображения: после перехода от аккомпаниатора к катушке художник не начнет загрузку, если он не находится в иерархии дерева просмотра. Так что ты можешь двигаться Image в Box с твоим while:

      Box(contentAlignment = Alignment.Center) {
    val painter = rememberImagePainter(R.drawable.test)
    Image(
        painter = painter,
        contentDescription = null,
        contentScale = ContentScale.Fit,
        modifier = Modifier
            .padding(8.dp)
            .size(84.dp)
            .clip(RoundedCornerShape(corner = CornerSize(16.dp)))
    )
    when (painter.state) {
        is ImagePainter.State.Empty -> Timber.w("Empty")
        is ImagePainter.State.Loading -> {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier.wrapContentSize()
            ) {
                CircularProgressIndicator()
            }
        }
        is ImagePainter.State.Success -> {

        }
        is ImagePainter.State.Error -> Timber.e("Error")
    }
}

Кроме того, он может не начать загрузку, если вы не предоставите достаточно модификаторов размера (это не ваш случай, просто чтобы вы знали). Ознакомьтесь с этим ответом для получения дополнительной информации.

Answer 4

      val context = LocalContext.current
val imageLoader = ImageLoader(context)

val request = ImageRequest.Builder(context)
        .data(thumbnailUrl)
        .build()

val painter = rememberImagePainter(
        request = request,
        imageLoader = imageLoader
    )

val state = painter.state

Image(
  painter = painter,
  contentDescription = "thumbnail image",
  modifier = Modifier
            .fillMaxSize()
            .placeholder(
                visible = state is ImagePainter.State.Loading,
                color = PlaceholderDefaults.color(
                    backgroundColor = SMXTheme.colors.shimmer.copy(0.1f),
                ),
                highlight = PlaceholderHighlight.shimmer(),
            ),
        contentScale = ContentScale.Crop
    )