Wie kann ich in Jetpack Compose dafür sorgen, dass ein untergeordnetes Bild über die Grenzen der übergeordneten Zeile hi ⇐ Android

[Anonymous]

Ich erstelle eine dynamische Jetpack Compose-Benutzeroberfläche, in der Layouts durch die JSON-Konfiguration gesteuert werden.
Jeder Container kann entweder vertikal (Spalte) oder horizontal (Zeile) sein und Komponenten wie Text, Symbole und Bilder werden basierend auf JSON-Attributen gerendert.
Hier ist ein vereinfachtes Beispiel meines JSON:

Code: Select all

{
"id": "productWrapper4",
"direction": "horizontal",
"components": [
{
"id": "rockiesLogo",
"width": 130,
"component": "image",
"url": "https://example.com/rockies-tv.png"
},
{
"id": "addIcon",
"component": "icon",
"name": "add"
},
{
"id": "mlbLogo",
"width": "100%",
"height": "100%",
"alignment": "left",
"component": "image",
"url": "https://example.com/mlb-tv.png"
}
]
}

Unter iOS (SwiftUI) darf das mlbLogo-Bild visuell über den rechten Rand seines horizontalen Containers (und sogar außerhalb des Bildschirms) hinausragen.
Aber in Android Jetpack Compose wird es immer verkleinert oder beschnitten, um es an die Zeilenbreite anzupassen.
Das bekomme ich:





Plattform
Ergebnis




iOS (SwiftUI)
Das MLB.TV-Bild reicht über den Kartenrand hinaus (Überlauf erlaubt).


Android (Compose)
Das Bild bleibt vollständig innerhalb der Zeile und wird entsprechend verkleinert.



Erwartet (iOS-Referenz):


Meine aktuelle Compose-Implementierung

Code: Select all

Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(0.dp)
) {
AsyncImage(
model = "https://example.com/rockies-tv.png",
contentDescription = null,
modifier = Modifier.width(130.dp)
)

Icon(Icons.Default.Add, contentDescription = null)

// MLB.TV logo — should overflow like in iOS
AsyncImage(
model = "https://example.com/mlb-tv.png",
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.graphicsLayer(clip = false), // Tried clip=false
contentScale = ContentScale.Fit,
alignment = Alignment.CenterStart
)
}

Ich habe auch Folgendes versucht:

• Box-Wrapper mit GraphicsLayer(clip = false) ~ Standard ist jedoch false
• Benutzerdefiniertes Layout {} mit Constraints.Infinity
• Verwendung eines im Bild verankerten Popups
• Subcompose Layouts
• Negative Auffüllung / Offsets verwenden

Aber keines davon ermöglicht es dem Bild, aus den Maßbeschränkungen seiner übergeordneten Zeile auszubrechen.
Compose scheint Breitenbeschränkungen zum Zeitpunkt der Messung durchzusetzen, sodass das Bild nie über sein übergeordnetes Bild hinaus gerendert wird.
Frage
Wie kann ich dafür sorgen, dass ein untergeordnetes Element (in diesem Fall ein Bild) visuell nach rechts überläuft, über die gemessene Breite seiner übergeordneten Zeile hinaus – ähnlich wie SwiftUI es Ansichten ermöglicht, außerhalb der Containergrenzen zu zeichnen?
Idealerweise:
Das übergeordnete Layout sollte nicht erweitert werden, um mit dem übereinzustimmen Überlauf.
Geschwister in der Zeile sollten sich nicht verschieben.
Nur das überlaufende Bild sollte über die Breite seines übergeordneten Bildes hinaus gerendert werden.
Funktioniert mit dynamischen JSON-Layouts (Container werden rekursiv erstellt).