android 如何使用Jetpack合成预览的图像占位符

ih99xse1  于 2022-11-20  发布在  Android
关注(0)|答案(3)|浏览(145)

有了XML,我们就可以在没有真实的数据的情况下,通过使用占位符来选择使用tools:进行设计。
我知道我可以在一个专用的预览函数中将样本数据传递给我的组合函数。但是,例如,当图像源是一个URL(通过Coil、Glide..加载)时,即使我传递了一个样本URL,它也不能在预览中加载。一个实用的解决方案可以保存开发时间。

3ks5zfa0

3ks5zfa01#

就像cd1上的更新一样答案:
rememberCoilPainter is renamed to rememberImagePainter and its arguments changed
有关更改的更多信息:

*rememberCoilPainter已重命名为rememberImagePainter,并且其参数已更改:
*shouldRefetchOnSizeChange已替换为onExecute,后者可以更好地控制是执行还是跳过图像请求。
*请求构建器已重命名为构建器
*淡入淡入持续时间Ms已被删除。迁移到图像请求.生成器.交叉淡入淡出
*previewPlaceholder已删除。ImageRequest.如果启用了检查模式,则现在将自动使用占位符
*LoadPainter已重新命名为ImagePainter

  • 如果未调用onDraw,ImagePainter将不再福尔斯退到使用根视图大小执行图像请求。如果在LazyColumn中使用ImagePainter并且图像大小未受约束,则最有可能注意到这一点。Loader和rememberLoadPainter将被删除。
    *LocalImageLoader.current不为空,默认情况下返回单个ImageLoader。
    *可绘制绘制器记住可绘制绘制器现在是专用的。

来源: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",
)
szqfcxe2

szqfcxe22#

如果使用“线圈”,则可以使用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

t5zmwmid

t5zmwmid3#

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/

相关问题