Oberflächen in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt

Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.

Informationen zu XR‑Gerätetypen →

Informationen zu XR‑Gerätetypen →

In Jetpack Compose Glimmer ist die surface Komponente ein grundlegender Baustein, der einen visuellen Bereich oder eine physische Begrenzung für Komponenten wie Schaltflächen und Karten darstellt.

Eine Oberfläche ist für die folgenden visuellen und physischen Eigenschaften verantwortlich:

• Clipping: Die untergeordneten Elemente werden auf eine bestimmte Form zugeschnitten.
• Border: Zeichnet einen inneren Rahmen, um die Komponentengrenze hervorzuheben. Wenn der Fokus darauf liegt, wird ein breiterer Rahmen mit einer Hervorhebung gezeichnet.
• Hintergrund: Wendet eine Hintergrundfarbe auf den Oberflächenbereich an.
• Depth effects: Rendert DepthEffect Schatten basierend auf dem Status der Komponente (z. B. Standard oder Fokus).
• Content Color: Stellt eine Farbe für Text und Symbole innerhalb der Oberfläche bereit, die standardmäßig aus der Hintergrundfarbe berechnet wird.
• Interaktionsstatus: Zeichnet ein gedrücktes Overlay, wenn die Oberfläche gedrückt wird und einen breiteren Rahmen mit einer Hervorhebung, wenn der Fokus darauf liegt.

Beispiel: Oberfläche erstellen

Mit dem folgenden Code wird eine Oberfläche mit Clipping, einem Hintergrund und Standardrahmen erstellt:

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

Interaktion und Fokus

Oberflächen sind standardmäßig nicht fokussierbar, sodass Nutzer nicht mit ihnen interagieren können. In den meisten Fällen sollten Oberflächen interaktiv sein, damit Nutzer den Fokus einheitlich verschieben und zwischen Komponenten navigieren können. Sie können den Compose focusable Modifikator für Oberflächen verwenden, die nur fokussierbar sein sollen. Ebenso können Sie mit dem Compose clickable Modifikator eine anklickbare Oberfläche erstellen. Sie können auch andere Modifikatoren für Oberflächen verwenden, für die Aktionen erforderlich sind.

Der folgende Code enthält Beispiele für fokussierbare und anklickbare Oberflächen:

@Composable
fun FocusableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text("Focusable")
    }
}

@Composable
fun ClickableSurfaceSample() {
    val interactionSource = remember { MutableInteractionSource() }
    Box(
        modifier = Modifier
            .size(100.dp)
            .surface(interactionSource = interactionSource)
            .focusable(interactionSource = interactionSource)
            .clickable(
                interactionSource = interactionSource,
                indication = null
            ) { /* Handle click action */ },
        contentAlignment = Alignment.Center
    ) {
        Text("Clickable")
    }
}
SurfaceSamples.kt

Wichtige Punkte zum Code

• Gemeinsame Interaktionsquelle für fokussierbare Oberflächen: Sowohl .surface() als auch .focusable() müssen dieselbe interactionSource verwenden. So kann die Oberfläche auf Fokusänderungen reagieren.

• Gemeinsame Interaktionsquelle für anklickbare Oberflächen: Sowohl .surface() als auch .clickable() müssen dieselbe interactionSource verwenden. So werden visuelle Status (z. B. „Gedrückt“ oder „Fokus“) synchronisiert und die Oberfläche kann visuell auf Nutzereingaben reagieren.

• Reihenfolge der Modifikatoren: Die Reihenfolge der Modifikatoren ist entscheidend. Da .surface() ein Layout zuschneidet, wird durch die Platzierung vor .clickable() sichergestellt, dass der Berührungszielbereich auf die Form der Oberfläche beschränkt ist. Wenn .clickable() zuerst kommt, kann sich der Interaktionsbereich über die sichtbaren, zugeschnittenen Grenzen der Komponente hinaus erstrecken.

SurfaceDepthEffect

Die SurfaceDepthEffect Klasse verwaltet den Übergang von Schatten zwischen Interaktionsstatus:

• depthEffect: Der Schatteneffekt, der verwendet wird, wenn sich die Oberfläche im Standardstatus befindet.
• focusedDepthEffect: Der Schatteneffekt, der verwendet wird, wenn der Fokus auf der Oberfläche liegt.