Мобильная версияI'm displaying a list of items retrieved from the database. Each item have an image URL and a boolean weather it is premium or not.
I want it if it is premium to display a Box above the actual image that is clickable for the user to watch an ad to be able to see the image.
I am loading the image using coil, so my problem is when the item is premium and the image is still loading the Box is composed but with the current size, and after the image is loaded the Box doesn't resize
This results in the Box not filling the available space as expected (see attached image)
This is my ImageItem composable fun:
@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() ) } } } } The result
Expected
When the images is being loaded
I've explored various solutions like using weight and onSizeChanged modifiers, but unfortunately, haven't found a successful solution. I'm relatively new to Compose and would greatly appreciate any insights or suggestions you might have to address this issue.
Thank you for your time and support!
Источник: https://stackoverflow.com/questions/781 ... be-resized
