如何在 Jetpack Compose 中使用图像占位符进行预览答案

【问题标题】：How to use image placeholders for preview with Jetpack Compose如何在 Jetpack Compose 中使用图像占位符进行预览
【发布时间】：2021-07-12 07:35:11
【问题描述】：

使用 XML，我们可以选择使用 tools: 在没有真实数据时使用占位符进行设计。我们在 Jetpack Compose 中有类似的东西吗？

我知道我可以在专用预览功能中将示例数据传递给我的可组合。但是例如，当图像源是 URL（由 Coil、Glide.. 加载）时，即使我传递了示例 URL，它也无法在预览中加载。一个实用的解决方案可以节省开发时间。

【问题讨论】：

标签： android image android-jetpack-compose

【解决方案1】：

就像对 cd1 的更新一样回答：

rememberCoilPainter is renamed to rememberImagePainter and its arguments changed

有关更改的更多信息：

rememberCoilPainter 重命名为 rememberImagePainter 及其参数已更改：
shouldRefetchOnSizeChange 被替换为 onExecute，它有更多控制是否执行或跳过图像请求。
requestBuilder 重命名为 builder。
fadeIn 和 fadeInDurationMs 被移除。迁移到 ImageRequest.Builder.crossfade。
previewPlaceholder 已被移除。 ImageRequest.placeholder 现在是如果启用了检查模式，则会自动使用。
LoadPainter 重命名为 ImagePainter。
ImagePainter 不再回退到执行图像请求如果未调用 onDraw，则为根视图的大小。这最有可能如果您在 LazyColumn 中使用 ImagePainter 和 Image 大小不受限制。 Loader 和 rememberLoadPainter 已被移除。
LocalImageLoader.current 不为空并返回单例默认为 ImageLoader。
DrawablePainter 和 rememberDrawablePainter 现在是私有的。

来源：https://coil-kt.github.io/coil/compose/

关于预览中可见的占位符，代码为：

Image(
    painter = rememberImagePainter(
        data = "https://www.example.com/image.jpg",
        builder = {
            placeholder(R.drawable.placeholder)
        }
    ),
    contentDescription = "some description",
)

【讨论】：

【解决方案2】：

如果你使用Coil，你可以使用previewPlaceholder参数，例如：

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

来源：https://google.github.io/accompanist/coil/#previews

【讨论】：

谢谢，这行得通！虽然我发现自己不得不在我的项目中放置一个占位符图像。在 xml 中，如果可以使用嵌入在 Android Studio 中的头像，例如：tools:srcCompat="@tools:sample/avatars"

【解决方案3】：

2022 年 3 月更新

如果您使用的是线圈...

implementation("io.coil-kt:coil-compose:2.0.0-rc01")

...现在您可以通过这种方式显示占位符：

AsyncImage(
   model = "https://www.example.com/image.jpg",
   placeholder = painterResource(R.drawable.placeholder),
   contentDescription = stringResource(R.string.description)
)

你可以在这里看到更多：https://coil-kt.github.io/coil/compose/

【讨论】：