Wie rotiere ich das Bild innerhalb der Grenzen der übergeordneten Spalte? ⇐ Android

[Anonymous]

Ich versuche, ein Bild in einer Spalte in Jetpack komponieren zu drehen, während ich seine Breite als Fillmaxwidth () beibehält. Wenn ich jedoch die Rotation anwende, erstrecken sich Teile des Bildes über die Spaltengrenzen hinaus.

Code: Select all

val url = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHDlh-4qMTJBTOUb30-vl_fA7gXDIBUg8zTg&s"

var rotationAngle by remember { mutableStateOf(0f)
Column(
modifier = Modifier
.fillMaxWidth()
.padding(32.dp)
.background(Color.Red)

) {
AsyncImage(
ImageRequest
.Builder(context)
.data(url)
.size(Size.ORIGINAL) // Load full-size image
.build(),
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.graphicsLayer(
rotationZ = rotationAngle,
transformOrigin = TransformOrigin.Center
)
.onGloballyPositioned { coordinates ->
with(density) {
imageWidth = coordinates.size.width.toDp()
imageHeight = coordinates.size.height.toDp()
}
},
contentScale = ContentScale.FillWidth
)

Button({

rotationAngle = (rotationAngle + 90f) % 360f

}, shape = RectangleShape) {
Text("Rotate")
}
}