Jetpack Compose Glimmer'daki yüzeyler

Uygun XR cihazlar

Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.

XR cihaz türleri hakkında bilgi edinin →

XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da surface bileşeni, düğmeler ve kartlar gibi bileşenler için ayrı bir görsel alanı veya fiziksel sınırı temsil eden temel bir yapı taşıdır.

Bir yüzey, aşağıdaki görsel ve fiziksel özelliklerden sorumludur:

• Kırpma: Alt öğelerini belirtilen bir şekle kırpar.
• Kenarlık: Bileşen sınırını vurgulamak için iç kenarlık çizer. Odaklandığında, odaklanmış bir vurguyla daha geniş bir kenarlık çizer.
• Arka plan: Yüzey alanına arka plan rengi uygular.
• Derinlik efektleri: Bileşenin durumuna (ör. varsayılan ve odaklanmış) göre DepthEffect gölgeler oluşturur.
• İçerik Rengi: Yüzeyin içindeki metin ve simgeler için bir renk sağlar. Bu renk, varsayılan olarak arka plan renginden hesaplanır.
• Etkileşim Durumları: Yüzeye basıldığında basılmış bir yer paylaşımı, odaklanıldığında ise vurgulu daha geniş bir kenarlık çizer.

Örnek: Yüzey oluşturma

Aşağıdaki kod, kırpma, arka plan ve varsayılan kenarlıklara sahip bir yüzey oluşturur:

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

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")
    }
}
SurfaceSamples.kt

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")
    }
}
SurfaceSamples.kt

Kodla ilgili önemli noktalar

• Paylaşılan etkileşim kaynağı: Her ikisi de .surface() ve .clickable() aynı interactionSource olmalıdır. Bu, görsel durumların (ör. basma veya odak) senkronize edilmesini sağlayarak yüzeyin kullanıcı girişine görsel olarak tepki vermesine olanak tanır.

• Değiştirici sıralaması: Değiştiricilerin sırası önemlidir. Çünkü .surface(), bir düzeni kırparak önceye yerleştirir .clickable(), dokunma hedefinin yüzeyin şekliyle sınırlanmasını sağlar. Şu durumlarda:clickable() önce geldiğinde etkileşim alanı, bileşenin görünür ve kırpılmış sınırlarının ötesine uzayabilir.

SurfaceDepthEffect

SurfaceDepthEffect sınıfı, gölgelerin etkileşim durumları arasındaki geçişini yönetir:

• depthEffect: Yüzey varsayılan durumdayken kullanılan gölge efekti.
• focusedDepthEffect: Yüzeye odaklanıldığında kullanılan gölge efekti.