如何在 Compose UI Android Jetpack 中将图像加载到 DrawImage 中？

Question

我可以使用 val image = +imageResource(R.drawable.header) 并用于DrawImage(image)从 Drawable Resource 加载图像，

但是如何将字符串 url 加载到DrawImage(image)? 中。我试过使用 Glide，但它需要加载到 imageView 中。同时DrawImage(image)不接受来自 imageView 的输入。

谢谢。

Answer 1

着眼1.0.x于实现它的最佳方法是使用Coil-Compose库。

添加您build.gradle的依赖项

dependencies {
    implementation("io.coil-kt:coil-compose:1.3.1")
}

然后只需使用：

Image(
    painter = rememberImagePainter("your url"),
    contentDescription = "My content description",
)

这会加载url传入的 with rememberImagePainter，然后使用标准Image可组合显示生成的图像。

Answer 2

Jetpack Compose 线圈

从互联网加载图像的另一种选择。

将线圈依赖添加到build.gradle：

dependencies {
    implementation "io.coil-kt:coil-compose:1.3.2") // 1.3.2 
}

简单使用：

import androidx.compose.foundation.Image
import coil.compose.rememberImagePainter

Image(
    painter = rememberImagePainter("https://picsum.photos/300/300"),
    contentDescription = stringResource(R.string.image_content_desc)
)

不要忘记添加互联网权限（AndroidManifest.xml）

<uses-permission android:name="android.permission.INTERNET"/>

更多定制在这里：Jetpack Compose - Coil Document

Answer 3

从 url 加载位图并使用asImageAsset()位图扩展方法的解决方案：

@Composable
fun loadPicture(url: String): UiState<Bitmap> {
    var bitmapState: UiState<Bitmap> by state<UiState<Bitmap>> { UiState.Loading }

    Glide.with(ContextAmbient.current)
        .asBitmap()
        .load(url)
        .into(object : CustomTarget<Bitmap>() {
            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                bitmapState = UiState.Success(resource)
            }

            override fun onLoadCleared(placeholder: Drawable?) { }
        })

    return bitmapState
}

像这样使用 Image() 函数：

val loadPictureState = loadPicture(url)
if (loadPictureState is UiState.Success<Bitmap>)
    Image(loadPictureState.data.asImageAsset())
else
    Text("Loading...")

此代码段使用来自JetNews官方 Google Jetpack Compose 示例中的Glide库和UiState辅助函数

Answer 4

由于某种原因，Jetpack compose 中仍未添加其支持。但目前，你可以使用这个类

https://gist.github.com/nglauber/8a3c39db47813483d788fb2914f0f21f#file-image-kt

要使用它，您需要这样调用它：

Image(
  <your image url>,
  144.dp,
  96.dp
  )
}

你可以在这里查看我是如何使用它的。 https://github.com/ranjeetsinha13/gobble/blob/f8d9bca4b010adf5b4aa59cc6e56f8612ee1de09/app/src/main/java/com/rs/gobble/ui/fragments/SearchFragment.kt#L120