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