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 →
Görüntüleme Gözlüğü
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 öğeleri 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")
    }
}

Etkileşim ve odak

Yüzeyler varsayılan olarak odaklanılabilir olmadığından kullanıcılar bunlarla etkileşimde bulunamaz. Çoğu durumda, kullanıcıların odağı tutarlı bir şekilde hareket ettirmesine ve bileşenler arasında gezinmesine olanak tanımak için yüzeyler etkileşimli olmalıdır. Yalnızca odaklanılabilir olması amaçlanan yüzeyler için Compose focusable değiştiricisini kullanabilirsiniz. Benzer şekilde, Compose clickable değiştiricisini kullanarak tıklanabilir bir yüzey oluşturabilirsiniz. İşlem gerektiren yüzeyler için başka değiştiriciler de kullanabilirsiniz.

Aşağıdaki kodda hem odaklanılabilir hem de tıklanabilir yüzeylere örnekler verilmiştir:

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

Kodla ilgili önemli noktalar

  • Odaklanılabilir yüzeyler için paylaşılan etkileşim kaynağı: Hem .surface() hem de .focusable() aynı interactionSource'i paylaşmalıdır. Bu, yüzeyin odak değişikliklerine tepki vermesini sağlar.

  • Tıklanabilir yüzeyler için paylaşılan etkileşim kaynağı: Hem .surface() hem de .clickable() aynı interactionSource'yi paylaşmalı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ırpar. Bu nedenle, .clickable() öğesini önce yerleştirmek dokunma hedefinin yüzeyin şekliyle sınırlanmasını sağlar. .clickable() önce gelirse 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.