Автоматическая высота Jetpack Compose Coil Image

Question

Я пытаюсь показать изображение с шириной заполнения и автоматической высотой с помощью Jetpack Compose Coil. Я хочу, чтобы изображение получило полную ширину и автоматическую высоту. Но изображение отображается только тогда, когда я указываю фиксированную высоту.

      Image(
    painter = rememberImagePainter(
        data = post.image
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

Я пробовал с .fillMaxHeight() а также .fillMaxSize()но это не работает. Есть ли способ добиться этого?

Answer 1

Это случается, когда один из представлений width/ heightрассчитывается как ноль, что означает, что он не должен отображаться и его не нужно загружать. Узнайте больше о причинах в этом выпуске на трекере сочинения.

Вы можете добавить size(OriginalSize) художнику builder. Это заставит изображение начать загрузку.

      Image(
    painter = rememberImagePainter(
        data = post.image,
        builder = {
            size(OriginalSize)
        },
    ),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

Этот параметр заставляет ваше представление загружать и помещать в память полный размер изображения, не оптимизируя его для текущего представления. Так что используйте его осторожно, только если вы уверены, что изображение не будет слишком большим, и вы действительно не можете добавлять модификаторы размера. В зависимости от вида содержимого, fillMaxWidth/ fillMaxHeight может хватить и без него.

Answer 2

С последнимвы можете сделать так:

      val model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .size(Size.ORIGINAL)
            .crossfade(true)
            .build()
val painter = rememberAsyncImagePainter(model)
Image(
     modifier = Modifier.fillMaxWidth(),
     painter = painter,
     contentDescription = null,
     contentScale = ContentScale.FillWidth
    )

Answer 3

Если ваше изображение OriginalSize слишком мало для вашего составного объекта, вы также можете использовать scale(Scale.FIT) в вашем строителе.

Ваше изображение будет максимально соответствовать вашему составному при сохранении соотношения сторон.

      Image(
    rememberImagePainter(
        data = user?.photoUrl?:"",
        builder = {
            size(OriginalSize)
            scale(Scale.FIT)
            transformations(CircleCropTransformation())
        }
    ),
    contentDescription = "Picture",
    contentScale = ContentScale.FillWidth
)

Answer 4

Вместо использования size(OriginalSize)что влияет на оптимизацию изображения, вы можете установить минимальную высоту/ширину для изображения (например, 1.dp). Это заставит изображение начать загрузку:

      Image(
    painter = rememberImagePainter(url),
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .defaultMinSize(minHeight = 1.dp),
)