Question

我可以使用 val image = +imageResource(R.drawable.header) 并使用DrawImage(image)从可绘制资源中加载图像，

但是如何将字符串URL加载到DrawImage(image)中呢？我尝试使用Glide，但是需要将其加载到imageView中。同时DrawImage(image)不接受imageView的输入。

谢谢。

Answer 1

一种从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...")

此代码段使用的是Glide库和UiState Jetpack Compose的Google官方示例中的JetNews帮助程序功能

Answer 2

使用 1.0.0-beta06 实现它的最佳方法是使用 github 上的 google 存储库中提供的 Accompanist 库。

<块引用>

Accompanist 是一组库，旨在为 Jetpack Compose 补充开发人员通常需要但尚不可用的功能。

Accompanist-glide 目前是 Glide for Jetpack Compose 的最佳解决方案。

添加您的 build.gradle 依赖项

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-glide:<version>"
}

然后只需使用：

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

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

Answer 3

在 Jetpack 的 Beta 版发布后，使用 accompanist - Jetpack Compose 的 Utils 库是上述用例的最干净的方法。

Answer 4

您可以使用remember观看位图，然后使用Glide提取位图并在获取后立即对其进行更新。

var bitmap by remember { mutableStateOf<Bitmap?>(null)}

Glide.with(ContextAmbient.current).asBitmap()
    .load("https://picsum.photos/200/300")
    .into(object : CustomTarget<Bitmap>() {
        override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
             bitmap = resource
          }

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

然后您可以像这样使用它：


if (bitmap != null )
    Image(bitmap!!.asImageAsset(), Modifier.fillMaxWidth())
else
    Text("Loading Image...")

（这是bviale's answer的现代版本）

Answer 5

用于 Jetpack Compose 的线圈

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

将 Coil 依赖项添加到 build.gradle :

dependencies {
    implementation "com.google.accompanist:accompanist-coil:<version>" // 0.8.1 
}

简单使用：

import androidx.compose.foundation.Image
import com.google.accompanist.coil.rememberCoilPainter

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

别忘了添加上网权限（AndroidManifest.xml）

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

更多自定义在这里：Accompanist Coil Document

Answer 6

    repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-glide:0.10.0"
}

然后

    import androidx.compose.foundation.Image
    import com.google.accompanist.glide.rememberGlidePainter
    
    Image(
        painter = rememberGlidePainter("https://picsum.photos/300/300"),
        contentDescription = stringResource(R.string.image_content_desc),
        previewPlaceholder = R.drawable.placeholder,
    )

Answer 7

由于某些原因，它的支持仍未在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

Answer 8

您可以使用this repo包裹在Glide上，并且可以轻松地在可组合fun s中使用

如何在Compose UI Android Jetpack中将url加载到Image到DrawImage中？

8 个答案:

用于 Jetpack Compose 的线圈