Mobile version
Bei der Vorschau eines Composables auf einem physischen Gerät (und manchmal auch in der Vorschau) sehe ich einen unerwarteten roten Umriss / Auslauf, obwohl das innere Composable den Hintergrund vollständig abdecken sollte.
Ich habe ein Feld mit einem roten, abgerundeten Hintergrund und darin eine Zeile mit einem weißen abgerundeter Hintergrund mit der gleichen Größe und demselben Eckenradius.
Bei der Vorschau auf Mobilgeräten sehe ich jedoch immer noch schwache rote geschwungene Kanten, wie im Screenshot gezeigt.
Code: Select all
@Composable
private fun UiTest() {
Box(
modifier = Modifier
.width(200.dp)
.height(82.dp)
.background(
color = Color.Red,
shape = RoundedCornerShape(24.dp)
)
) {
Row(
modifier = Modifier
.fillMaxSize()
.background(
color = Color.White,
shape = RoundedCornerShape(24.dp)
)
)
}
}
Die weiße Zeile sollte den roten Hintergrund vollständig abdecken, sodass kein Rot sichtbar sein sollte.
Tatsächliches Verhalten
Eine dünne rote Kurve/Umriss ist immer noch an den Rändern sichtbar (besonders auffällig auf einem echten Gerät).
Screenshot
(hängen Sie das Bild an, das Sie geteilt haben)
Frage
- Warum ist der übergeordnete Hintergrund immer noch sichtbar, obwohl das untergeordnete Element die gesamte Größe ausfüllt?
- Wird dies durch Anti-Aliasing oder Form verursacht? Clipping oder ein Compose-Rendering-Problem?
- Was ist der richtige Weg, dieses Ausbluten zu vermeiden, wenn abgerundete Ecken verwendet werden?
