我正在显示从数据库中检索到的项目列表. 每个项目都有一个图像URL和一个布尔天气,无论是溢价还是不溢价.
我想如果它是溢价显示Box以上的实际图像,这是用户可以点击观看广告,以能够看到图像.
我加载图像使用线圈,所以我的问题是,当该项目是保费和图像仍在加载Box组成,但与当前的大小,并在图像加载后,Box不调整大小
这会导致Box无法按预期填满可用空间(见附图)
这是我的ImageItem个可组合的乐趣:
@Composable
private fun ImageItem(
wallpaperItem: Wallpaper
) {
Box(
modifier = Modifier
.fillMaxSize()
) {
// Getting the image using coil
SubcomposeAsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(wallpaperItem.imageUrl)
.crossfade(true)
.build(),
loading = { LinearProgressIndicator() },
onLoading = { viewModel.isLoading(true) },
onSuccess = {
viewModel.isLoading(false)
},
onError = { viewModel.sendUiEvent(UiEvent.ShowSnackbar(it.result.throwable.message.toString())) },
contentDescription = null,
contentScale = ContentScale.Fit,
modifier = Modifier
.clickable { viewModel.onEvent(HomeEvent.OnWallpaperClick(wallpaperItem)) }
.clip(RoundedCornerShape(12.dp))
)
// Checking weather the image is premium or not
if (wallpaperItem.isPremium) {
Box(
modifier = Modifier
.fillMaxSize()
.alpha(0.5f)
.background(colorResource(id = R.color.darkGreen))
) {
Text(
text = "Watch ad\nTo view the wallpaper",
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxSize()
)
}
}
}
}
结果
预期
加载图像时
我已经探索了各种解决方案,比如使用weight和onSizeChanged修饰符,但不幸的是,还没有找到一个成功的解决方案.我是一个相对较新的composer ,非常感谢您对解决这个问题的任何见解或建议.
感谢您的时间和支持!