Kształty w Jetpack Compose Glimmer

Obsługiwane urządzenia z XR

Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń z 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 granic wizualnych i zaokrągleń. Klasa Shapes udostępnia różne poziomy zaokrąglenia 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 tym samym rozmiarze. Jest używany w komponentach takich jak karty. Domyślnie jest to RoundedCornerShape o rozmiarze 24.dp.
• Średni: kształt z 4 rogami o tym samym rozmiarze, którego rozmiar mieści się między małym a dużym. Jest to najczęściej używany kształt, który jest domyślnie stosowany na powierzchni. Domyślnie jest to RoundedCornerShape o rozmiarze 36.dp.
• Duży: kształt z 4 w pełni 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 GlimmerTheme i stosowanie ich do komponentów

Najpierw pobierz zdefiniowane kształty z GlimmerTheme.shapes, a następnie zastosuj je do niektórych komponentów:

@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) }
    }
}

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

Dostosowywanie kształtów

Klasa Shapes jest @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 określone promienie do marki swojej aplikacji.

Przykład: zastępowanie określonych wartości kształtów

Poniższy kod zastępuje określone wartości kształtów:

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}
ShapesSamples.kt

Wartości domyślne

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