Kształty w Jetpack Compose Glimmer

Odpowiednie urządzenia XR

Te wskazówki pomogą Ci tworzyć rozwiązania na te typy urządzeń XR.

Więcej informacji o typach urządzeń z XR

Więcej informacji o typach urządzeń z XR

W Jetpack Compose Glimmer powierzchnie używają kształtów do określania swoich wizualnych granic i zaokrągleń. Klasa Shapes zapewnia różne poziomy zaokrąglenia, które są przeznaczone dla różnych typów komponentów.

Kategorie kształtów

Klasa GlimmerTheme definiuje 3 standardowe rozmiary kształtów:

• Mały: kształt z 4 rogami o takiej samej wielkości. Jest on używany w przypadku komponentów, takich jak karty. Domyślnie jest to RoundedCornerShape o wartości 24.dp.
• Średni: kształt z 4 rogami o takim samym rozmiarze, który jest większy niż mały, ale mniejszy niż duży. Jest to najczęściej używany kształt, który jest domyślnie stosowany na powierzchni. Domyślnie jest to RoundedCornerShape o wartości 36.dp.
• Duży: kształt z 4 zaokrąglonymi rogami. Ten kształt jest używany w komponentach takich jak przyciski. Domyślnie jest to CircleShape.

Przykład: pobieranie kształtów z motywu GlimmerTheme i stosowanie ich do komponentów

Najpierw pobierz zdefiniowane kształty z GlimmerTheme.shapes:

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}
ShapesSamples.kt

Następnie możesz zastosować te kształty do niektórych komponentów:

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

Dostosowywanie kształtów

Klasa Shapes to @Immutable. Możesz utworzyć kopię istniejących kształtów motywu i zastąpić określone wartości za pomocą funkcji kopiowania. Zrób to, aby zachować strukturę motywu, dostosowując jednocześnie konkretne promienie do marki aplikacji.

Przykład: zastępowanie określonych wartości kształtu

Poniższy kod zastępuje określone wartości kształtu:

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

Wartości domyślne

Jeśli w GlimmerTheme nie określono inaczej, system domyślnie używa tych wartości: