compose 让占位图在 `AsyncImage` 中保持居中的写法

要让占位图在AsyncImage中保持居中有几种方法1.使用contentAlignment参数最简单AsyncImage(modelimageUrl,contentDescriptionImage,placeholderpainterResource(R.drawable.ic_placeholder),contentScaleContentScale.Crop,// 或其他缩放模式modifierModifier.fillMaxSize(),// 添加 contentAlignmentcontentAlignmentAlignment.Center// 关键让内容居中)2.使用Image组件包裹更灵活AsyncImage(modelimageUrl,contentDescriptionImage,contentScaleContentScale.Crop,modifierModifier.fillMaxSize(),placeholder{// 自定义 placeholder可以完全控制布局Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center// 居中){Image(painterpainterResource(R.drawable.ic_placeholder),contentDescriptionPlaceholder,contentScaleContentScale.Fit,// 保持原比例modifierModifier.size(100.dp)// 控制大小)}})3.在BannerImageWithPlaceholder中实现ComposablefunBannerImageWithPlaceholder(modifier:ModifierModifier,imageUrl:String?,contentDescription:String?null,placeholderResId:IntR.drawable.ic_placeholder,contentScale:ContentScaleContentScale.Crop,){Box(modifiermodifier,contentAlignmentAlignment.Center// 整体居中){// 占位图居中显示Image(painterpainterResource(idplaceholderResId),contentDescriptioncontentDescription,contentScaleContentScale.Fit,// 保持比例modifierModifier.fillMaxSize().padding(16.dp)// 添加内边距)// 主图片AsyncImage(modelimageUrl,contentDescriptioncontentDescription,contentScalecontentScale,modifierModifier.fillMaxSize(),placeholder{// 加载时的占位图已经在上层显示了这里可以留空Box{}},error{// 错误时的占位图已经在上层显示了这里可以留空Box{}})}}4.使用Alignment参数的高级控制AsyncImage(modelimageUrl,contentDescriptionImage,placeholderpainterResource(R.drawable.ic_placeholder),modifierModifier.fillMaxSize(),// 完整控制contentScaleContentScale.Fit,// 缩放模式alignmentAlignment.Center,// 对齐方式alpha1f,// 透明度colorFilternull,// 颜色滤镜)5.自定义占位图布局最推荐ComposablefunBannerImageWithPlaceholder(modifier:ModifierModifier,imageUrl:String?,contentDescription:String?null,placeholderResId:IntR.drawable.ic_placeholder,contentScale:ContentScaleContentScale.Crop,){Box(modifiermodifier,contentAlignmentAlignment.Center){// 先显示占位图始终显示Image(painterpainterResource(idplaceholderResId),contentDescriptioncontentDescription,contentScaleContentScale.Fit,modifierModifier.fillMaxSize(0.8f)// 占位图占80%空间.padding(16.dp))// 主图片覆盖在占位图上AsyncImage(modelimageUrl,contentDescriptioncontentDescription,contentScalecontentScale,modifierModifier.fillMaxSize(),// 加载状态处理onLoading{// 加载中占位图保持显示},onSuccess{// 加载成功显示主图},onError{// 加载失败占位图保持显示})}}6.针对您的 Banner 场景优化ComposablefunBannerImageWithPlaceholder(modifier:ModifierModifier,imageUrl:String?,contentDescription:String?null,placeholderResId:IntR.drawable.ic_placeholder,contentScale:ContentScaleContentScale.Crop,){AsyncImage(modelImageRequest.Builder(LocalContext.current).data(imageUrl).crossfade(true).build(),contentDescriptioncontentDescription,contentScalecontentScale,modifiermodifier,// 占位图居中显示placeholder{Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){Image(painterpainterResource(idplaceholderResId),contentDescriptionPlaceholder,contentScaleContentScale.Fit,modifierModifier.size(80.dp)// 固定大小.alpha(0.7f)// 半透明)}},// 错误图也居中显示error{Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){Image(painterpainterResource(idplaceholderResId),contentDescriptionError,contentScaleContentScale.Fit,modifierModifier.size(80.dp).alpha(0.5f))}})}7.使用ContentScale控制缩放行为不同的ContentScale会影响居中效果// 常用缩放模式ContentScale.Fit// 保持比例完全显示可能留空白ContentScale.Crop// 保持比例裁剪超出部分ContentScale.FillBounds// 拉伸填充不保持比例ContentScale.FillHeight// 填充高度ContentScale.FillWidth// 填充宽度ContentScale.Inside// 保持比例限制在边界内// 配合 AlignmentAsyncImage(placeholderpainterResource(R.drawable.ic_placeholder),contentScaleContentScale.Fit,// 保持比例alignmentAlignment.Center,// 居中modifierModifier.fillMaxSize())8.推荐方案针对 Banner 组件ComposablefunBannerImageWithPlaceholder(modifier:ModifierModifier,imageUrl:String?,contentDescription:String?null,placeholderResId:IntR.drawable.ic_placeholder,contentScale:ContentScaleContentScale.Crop,){// 使用 Box 层叠布局Box(modifiermodifier,contentAlignmentAlignment.Center){// 背景占位图永远在底层Image(painterpainterResource(idplaceholderResId),contentDescriptioncontentDescription,contentScaleContentScale.Fit,modifierModifier.fillMaxSize(0.6f)// 占60%空间.padding(20.dp).alpha(0.8f))// 主图片AsyncImage(modelimageUrl,contentDescriptioncontentDescription,contentScalecontentScale,modifierModifier.fillMaxSize(),alignmentAlignment.Center,// 图片本身也居中placeholder{// 加载时显示占位动画Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){CircularProgressIndicator(modifierModifier.size(40.dp),strokeWidth2.dp)}})}}总结最简单的解决方案placeholder{Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center){Image(painterpainterResource(R.drawable.ic_placeholder),contentDescriptionLoading,contentScaleContentScale.Fit)}}关键点使用Box包裹占位图设置contentAlignment Alignment.Center根据需求选择合适的ContentScale可以添加padding或size控制占位图大小