Jetpack Compose Glimmer'daki listeler

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 GlimmerLazyColumn, yalnızca görünür öğeleri oluşturup yerleştirerek yüksek performansı korumak için Compose LazyColumn'a benzer şekilde çalışır. Ancak Glimmer tembel sütunları, kullanıcının dokunmatik ekran yerine dokunmatik alanı kullanarak etkileşimde bulunduğu ekran kontrolleri için oluşturulur. Mobil kullanıcılar ekrandaki herhangi bir koordinata istedikleri zaman dokunabilirken ekran gözlüğü olan kullanıcılar yalnızca odaklanılan öğeyle etkileşim kurabilir.

Odaklanma davranışı ve alt öğeler

Glimmer tembel sütunları, odak tabanlı gezinmeyi otomatik olarak işler. Odak ve kaydırma işlemlerinin genellikle ayrı olduğu mobil cihazlardaki listelerin aksine, Glimmer tembel sütunu, kullanıcı dokunmatik yüzeyle kaydırdıkça odağı alt öğeleri arasında hareket ettirerek bu iki işlemi koordine eder. Listenin kendisi odaklanılabilir olmadığından, alt öğeleri için odağı yönetir ve ister. Böylece kullanıcı, kaydırma sırasında net bir etkileşim noktasına sahip olur.

Doğrudan dokunma girişi olmadığından, Glimmer tembel sütunundaki tüm alt öğeleri odaklanılabilir hale getirin. Öğeler odaklandığında etkin bir kenarlık veya vurgu gibi görsel bir yanıt da sağlayın. Kullanıcılar, odaklanılamayan öğeleri kaydırarak geçmeye devam edebilir ancak bu öğelerle etkileşimde bulunamaz. Mümkün olduğunda ListItem veya Card gibi yerleşik bileşenleri kullanın. Bu bileşenler zaten odaklanılabilir ve odaklanma durumları için görsel geri bildirim sağlar.

Örnek: Birden fazla öğe içeren, geç yüklenen ışıltılı sütunlar

Aşağıdaki kodda, öğe listesi oluşturmak için öğe ve öğeler DSL yöntemleriyle Glimmer tembel sütununun nasıl kullanılacağı gösterilmektedir:

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}
GlimmerLazyColumnSamples.kt

Örnek: Başlık yuvası olan Glimmer tembel sütunları

Jetpack Compose Glimmer, başlık yuvası içeren GlimmerLazyColumn aşırı yüklemesi de sağlar. Genellikle TitleChip olan odaklanılamayan başlık, liste içeriği altında kaydırılırken üst orta kısımda statik olarak kalır.

Aşağıdaki kod, başlık yuvası olan bir Glimmer tembel sütunu oluşturur:

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}
GlimmerLazyColumnSamples.kt

Programatik liste işlemleri için Glimmer tembel liste durumunu kullanma

Listenin durumunun farklı yönlerini (ör. firstVisibleItemIndex ve firstVisibleItemScrollOffset özelliklerini kullanarak kaydırma konumu) kontrol etmek ve gözlemlemek için GlimmerLazyListState kullanın.

Bu durumu yükseltmek için rememberGlimmerLazyListState kullanarak scrollToItem ve animateScrollToItem ile programatik olarak kaydırabilirsiniz.