如何使用Jetpack Glance将互联网上的图片加载到小部件中？

Question

我有一个使用Jetpack Compose和Jetpack Glance库开发的小部件，它是一个LazyColumn列表，在其中我通过查询Room数据库来传递信息。

尝试加载图像时，我使用了Image()和provider，将一个字符串（即我想要加载的图像的URL）传递给它。

Image(
   modifier = GlanceModifier.size(50.dp),
   provider = ImageProvider(item.image),
   contentDescription = null
)

这段话的意思是：“我尝试加载一张图片，但是没有成功。我尝试将图片的 URL 传递给 BitmapImageProvider() 来加载它，但是仍然不起作用。是否有一种方法可以使用 Jetpack Glance 加载远程图片到小部件中？”

- Jéluchu

---

你尝试过使用 Coil 库吗？ - Arfin Hosain

是的，我已经尝试过了，但在那个时候该小部件停止显示信息并显示了一个通用的GlanceApplicationWidget错误，因为它没有AsyncImage Glance修饰符等。我想它崩溃并停止工作。 - Jéluchu

请查看这个问题。我希望它能解决你的问题。https://dev59.com/QbH3oIgBc1ULPQZFLo1G?rq=1 - Arfin Hosain

谢谢，虽然我已经查看了那个线程，但当我尝试将其转换为位图时出现错误：“Glance App Widget android.os.NetworkOnMainThreadException中的错误”，这在某种程度上与协程更相关，而且由于转换是在Image()中完成的，所以我无法在Composable中运行协程，就像我可以在应用程序的任何其他地方一样。 - Jéluchu

Answer 1

我建议查看ImageGlanceWidget示例代码。该示例演示了如何使用WorkManager从网络加载图像，并使用URI或位图来显示它们。

目前，在Glance/Widgets中加载图像和后台工作会很棘手，但我们很快将通过支持重新组合来改善这种情况。

以下是未来版本的Glance中它将会是怎样的一个示例 https://gist.github.com/marcelpinto/6df5e3e6ca42c6a0bf34b9f4b6eb1cff

- Marcel

---

我正在尝试测试它，因为我试图将其适应于列表项（因为列表中的每个项目都有不同的图像），但是到目前为止，当我应用它时，我会得到“无法加载小部件”的消息。 - Jéluchu

我一直在测试，我已经添加了属性allowHardware(isHardware)和debugging。我已经成功地获得了位图，并在小部件中看到了CircularProgressIndicator()，但在显示图像时，小部件停止显示。我留下在logcat中的错误之一是： - Jéluchu

您可能配置了错误的Coil。这个错误似乎与Glance无关。只需将可绘制资源转换为位图并确保它可以正常使用。如果可以，则必须是Coil实现有问题。 - Marcel

@Marcel，我也使用你的示例代码遇到了“无法加载小部件”的问题。在UriImageProvider中抛出了一个静默错误，导致小部件在尝试渲染时崩溃。这不是Coil的问题，因为Coil只是下载图像并将其保存到缓存中（正确地）。在getImageProvider()中，我不得不替换实现，以便将位图传递给ImageProvider初始化程序：return ImageProvider(bitmap)``` 希望Glance的未来版本很快就会发布！ - Jon Reed

请查看我的其他答案 https://dev59.com/fMXsa4cB1Zd3GeqPzNOH#75476922 - Marcel

Answer 2

对于您的提供者参数，您可以使用以下函数从文件中提取位图。 path 参数是您在本地存储中保存下载的位图的位置。

Image(
   modifier = GlanceModifier.size(50.dp),
   provider = getImageProvider(LocalContext.current),
   contentDescription = null
)

private fun getImageProvider(path: String): ImageProvider {
    return if (path=="") { /*dummy image to return if path is blank*/
        ImageProvider(R.drawable.ic_launcher_background)
    } else {
        val bitmap = BitmapFactory.decodeFile(path)
        ImageProvider(bitmap)
    }
}

/*path parameter example*/
val bitmapFile = File(fileDir, fileName)
val uri = Uri.fromFile(outputFile)
val path = uri.path ?: ""

- mars8