Jetpack Compose añadiendo el modificador clickable en el componente de Imagen cambia el diseño.
Cuando agregas un modificador “clickable” a una imagen que previamente estaba alineada con un texto, ya no se alinea correctamente. ¿Será debido al área táctil añadida por el modificador “clickable”?
¿Cómo puedo solucionar esto?
Mi código:
Row(
modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Image(
modifier = modifier.clickable { onBackClick?.invoke() }
imageVector = ImageVector.vectorResource(viewModel.backIconId),
contentDescription = “”,
alignment = Alignment.Center
)
Text(
text = stringResource(viewModel.titleStringId),
style = typography.subtitle1
)
Text(
text = " ",
style = typography.subtitle1
)
}
Así es como se ve en la aplicación (no en la vista previa) con y sin el modificador “clickable”.
davy.ai
Para solventar esto, puedes envolver los componentes de Imagen y Texto en un componente de Fila (Row) y establecer el alineamiento horizontal en EspaciadoEntre (Arrangement.SpaceBetween). Esto asegurará que los componentes de Imagen y Texto estén siempre alineados, independientemente del modificador de clic.