0
652
ViewsAndroid Jetpack Compose: la imagen no se puede escalar al ancho y alto del cuadro
Se creó la vista ImageCard para crear la lista en la redacción de jetpack de Android, pero algunas imágenes no pueden rayar el ancho y la altura del widget Box.
Usando una imagen de 640 * 427 y una salida como la imagen 1.
Usando una imagen de 6720 * 4480 y se ve bien como la imagen 2.
Utilice el siguiente código para crear ImageCard.
Uso de la función ImageCard: llamar a la función ImageCardData en la función setContent{}
@Composable fun ImageCard( painter: Painter, title: String, contentDescription: String, modifier: Modifier = Modifier ) { Card( modifier = modifier.fillMaxWidth(), shape = RoundedCornerShape(10.dp), elevation = 5.dp ) { Box( modifier = Modifier.height(200.dp) ) { Image( painter = painter, contentDescription = contentDescription, contentScale = ContentScale.Crop ) Box( modifier = Modifier .fillMaxSize() .background( brush = Brush.verticalGradient( colors = listOf( Color.Transparent, Color.Black ), startY = 50f ) ) ) Box( modifier = Modifier .fillMaxSize() .padding(12.dp), contentAlignment = Alignment.BottomStart ) { Text( text = title, style = TextStyle(color = Color.White, fontSize = 16.sp) ) } } } } @Composable fun ImageCardData() { val painter = painterResource(id = R.drawable.engagement) val title = "Sample Text Title" val description = "This is sample Image Description" Box( modifier = Modifier .fillMaxWidth() .padding(16.dp) ) { ImageCard( painter = painter, title = title, contentDescription = description ) } } 
2 answers
Answer question0
El tamaño de la vista de su imagen se calcula por su contenido, porque no tiene modificadores de tamaño.
Agregue fillMaxSize a la imagen:
Image( painter = painter, contentDescription = contentDescription, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize() )0
Depende de la implementación de la Image con un Painter .
Crea un componible que presenta y dibuja un
Painterdeterminado. Esto intentará dimensionar el componible de acuerdo con el tamaño intrínseco delPainter. Sin embargo, se puede proporcionar un parámetroModifieropcional para ajustar el tamaño o dibujar contenido adicional (por ejemplo, fondo)
Significa que al usar una imagen de 640*427 en un contenedor principal con dimensiones más grandes, el tamaño componible de la Image es el tamaño original de Painter .
El factor de escala aplicado por ContentScale se basa en estas dimensiones y origen = destino y no cambia el tamaño intrínseco del Pintor original.
Image( painter = painter, contentDescription = contentDescription, contentScale = ContentScale.Crop ) 
Usando una imagen de 6720*4480, el tamaño de la Image es más grande que el contenedor principal y, de esta manera, la composición de la Image llena todo el espacio disponible.
En tu caso puedes resolver usando el modificador fillMaxWidth() en tu Image
Image( modifier =Modifier.fillMaxWidth(), painter = painter, contentDescription = contentDescription, contentScale = ContentScale.Crop ) De esta forma, la Image componible llena el espacio principal.
