Powierzchnie w Jetpack Compose Glimmer

Odpowiednie urządzenia XR
Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń XR.
Więcej informacji o typach urządzeń z XR
Okulary wyświetlające
Więcej informacji o typach urządzeń z XR

W Jetpack Compose Glimmer komponent surface jest podstawowym elementem składowym, który reprezentuje odrębny obszar wizualny lub fizyczną granicę komponentów, takich jak przyciski i karty.

Platforma odpowiada za te właściwości wizualne i fizyczne:

  • Przycinanie: przycina elementy podrzędne do określonego kształtu.
  • Obramowanie: rysuje obramowanie wewnętrzne, aby podkreślić granicę komponentu. Gdy jest aktywny, rysuje szerszą ramkę z wyróżnieniem.
  • Tło: stosuje kolor tła do obszaru.
  • Efekty głębi: renderuje DepthEffect cienie na podstawie stanu komponentu (np. domyślnego lub aktywnego).
  • Kolor treści: określa kolor tekstu i ikon na powierzchni, domyślnie obliczany na podstawie koloru tła.
  • Stany interakcji: rysuje nakładkę po naciśnięciu powierzchni i szerszą obwódkę z podświetleniem, gdy jest zaznaczona.

Przykład: tworzenie powierzchni

Poniższy kod tworzy powierzchnię z przycinaniem, tłem i domyślnymi obramowaniami:

@Composable
fun SurfaceSample() {
    Box(Modifier.surface().padding(horizontal = 24.dp, vertical = 20.dp)) {
        Text("This is a surface")
    }
}

Interaction and Focus

Surfaces aren't focusable by default, so users can't interact with them. In most cases, surfaces should be interactive to let users consistently move focus and navigate between components. You can use the Compose focusable modifer for surfaces that are only intended to be focusable, or the Compose clickable modifer and other modifiers for surfaces that require actions.

You can create a focusable surface by combining a surface modifier with the focusable modifier:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to focusable to make sure that
                // surface appears focused when interacted with.
                interactionSource = interactionSource
            )
            .focusable(interactionSource = interactionSource)
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a focusable surface")
    }
}

Key points about the code

  • Shared interaction source: Both .surface() and .focusable() must share the same interactionSource. This lets the surface react to focus changes.

Similarly, you can create a clickable surface:

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier.surface(
                // Provide the same interaction source here and to clickable to make sure that
                // surface appears focused and pressed when interacted with
                interactionSource = interactionSource
            )
            .clickable(interactionSource = interactionSource, onClick = {})
            .padding(horizontal = 24.dp, vertical = 20.dp)
    ) {
        Text("This is a clickable surface")
    }
}

Najważniejsze informacje o kodzie

  • Udostępnione źródło interakcji: oba .surface() i .clickable() musi mieć ten sam interactionSource. Dzięki temu stany wizualne (np. naciśnięcie lub fokus) są zsynchronizowane, co pozwala urządzeniu reagować wizualnie na działania użytkownika.

  • Kolejność modyfikatorów: kolejność modyfikatorów ma kluczowe znaczenie. Bo.surface() przycina układ, umieszczając go przed .clickable() zapewnia, że docelowy element dotykowy jest ograniczony do kształtu powierzchni. Jeśliclickable() jest na pierwszym miejscu, obszar interakcji może wykraczać poza widoczne, przycięte granice komponentu.

SurfaceDepthEffect

Klasa SurfaceDepthEffect zarządza przejściem cieni między stanami interakcji:

  • depthEffect: efekt cienia używany, gdy powierzchnia jest w stanie domyślnym.
  • focusedDepthEffect: efekt cienia używany, gdy powierzchnia jest zaznaczona.