如何使用图像占位符通过 Jetpack Compose 进行预览

Question

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

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

Answer 1

2022 年 11 月更新

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

implementation("io.coil-kt:coil-compose:2.2.2")

...现在您只能通过这种方式在调试模式下使用占位符进行预览：

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

并创建一个 util 方法：

@Composable
fun debugPlaceholder(@DrawableRes debugPreview: Int) =
    if (LocalInspectionMode.current) {
        painterResource(id = debugPreview)
    } else {
        null
    }

您可以在这里查看更多信息：https ://coil-kt.github.io/coil/compose/

Answer 2

正如 cd1 答案的更新：

rememberCoilPainter is renamed to rememberImagePainter and its arguments changed

有关更改的更多信息：

• RememberCoilPainter已重命名为RememberImagePainter，并且其参数已更改：
• shouldRefetchOnSizeChange被替换为onExecute，它可以更好地控制是否执行或跳过图像请求。
• requestBuilder已重命名为builder。
• fadeIn和fadeInDurationMs已删除。迁移到 ImageRequest.Builder.crossfade。
• 预览占位符已删除。如果启用检查模式，现在会自动使用ImageRequest.placeholder 。
• LoadPainter重命名为ImagePainter。
• 如果未调用 onDraw， ImagePainter不再使用根视图的大小执行图像请求。如果您在 LazyColumn 中使用 ImagePainter 并且图像的大小不受限制，这一点很可能会很明显。Loader 和 RememberLoadPainter 被删除。
• LocalImageLoader.current不为 null，默认返回单例 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",
)

Answer 3

如果您使用的是 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