Jetpack Compose Glimmer'da dikey yığınlar

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 VerticalStack, öğeleri görsel olarak çakışan üç boyutlu bir sırada düzenleyen, dikey olarak kaydırılabilen bir düzendir. Birincil öğe ön planda belirgin bir şekilde gösterilirken sonraki öğeler bunun arkasına yerleştirilir.

Şekil 1. Jetpack Compose Glimmer'daki bazı farklı yığın stillerine örnek.

Kaydırma ve konumlandırma davranışları

Gruplar, öğeleri kompakt ve çakışan bir düzende tuttuğundan, listeler gibi diğer sıralı bileşen türlerinden farklı davranışlar gösterir:

  • Kullanıcı dikey olarak kaydırdığında etkin ön plan öğesi görünümden çıkar ve hemen altındaki öğenin belirgin ön plan konumuna kaymasına olanak tanır.
  • Öğeler, kullanıcının hareketi sona erdikten sonra her zaman özel bir yay animasyonu kullanılarak ön plan konumuna yerleştirilir.
  • Öğeler z ekseni boyunca konumlandırılır. Listedeki daha sonraki öğeler, birincil öğenin arkasına yerleştirilir.

Odak yönetimi

VerticalStack, kullanıcının etkileşimde bulunacağı birincil hedef olarak her zaman mevcut ön plan öğesini kullanmak için özel bir odak sistemi kullanır:

  • İlk odak ve yeniden giriş: İlk odak ve yeniden odaklanma, yığının mevcut üst öğesine gider.
  • Otomatik odaklama bildirimi: Öğeler geçiş yaparken yığın, en üstteki öğe için odaklama isteğinde bulunur.
  • Odaklanma takibi: Her öğe, kendi odaklanma durumunu onFocusChanged kullanarak StackState bildirir.

Örnek: Dikey yığın oluşturma

Aşağıdaki kod, birkaç öğe içeren dikey bir yığın oluşturur:

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}

Kodla ilgili önemli noktalar

  • Metnin LocalTextStyle için textMotion değerini Animated olarak ayarlar. Bu, düzen animasyonları veya ölçeklendirme geçişleri sırasında metnin sorunsuz şekilde oluşturulmasını sağlayarak piksel yapıştırma artefaktlarını önler.
  • Dikey yığının yüksekliği için belirli bir 364.dp boyutu sağlar. Kart geçişleri için görsel alanı tanımlamak üzere her zaman belirli bir yükseklik sağlayın, yükseklik değiştirici kullanın veya fillMaxSize değiştiricisini uygulayın.
  • Şekil parametresini doğrudan alan diğer bileşenlerin aksine, VerticalStack, öğelerinin görsel sınırlarını itemDecoration değiştiricisini kullanarak yönetir. Bu örnek, tutarlı kırpma ve görsel efektler sağlamak için ilk öğenin itemDecoration özelliği için tüm alt öğelerle aynı şekli geçirir. Bu örnekte varsayılan CardDefaults.shape kullanılır.