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 VerticalList, 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 Jetpack Compose Glimmer'da dikey listeler, 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

Dikey listeler, odak tabanlı gezinmeyi otomatik olarak işleyecek şekilde optimize edilir. Odak ve kaydırmanın genellikle ayrı olduğu mobil cihazlardaki listelerin aksine, dikey listede kullanıcı dokunmatik yüzeyle kaydırdıkça odak alt öğeler arasında hareket ettirilerek bu iki işlem birlikte gerçekleştirilir. Listenin kendisi odaklanılabilir değildir. Bu nedenle, kullanıcı kaydırma sırasında net bir etkileşim noktasına sahip olsun diye alt öğeleri için odaklanmayı yönetir ve ister.

Doğrudan dokunma girişi olmadığından, dikey listeye yerleştirdiğiniz tüm alt öğeleri odaklanılabilir hale getirin ve öğeler odaklandığında görsel yanıt (ör. etkin kenarlık veya vurgu) sağlayın. Kullanıcılar, odaklanılamayan öğeleri kaydırarak geçebilir ancak bu öğelerle etkileşimde bulunamaz. Mümkün olduğunda dikey listelerinizde 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 dikey liste

Aşağıdaki kodda, öğe listesi oluşturmak için öğe ve öğeler DSL yöntemleriyle dikey liste kullanma işlemi gösterilmektedir:

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

Örnek: Başlık yuvası olan dikey liste

Jetpack Compose Glimmer, başlık yuvası içeren dikey liste aşırı yüklemesi de sağlar. Odaklanılamayan başlık (genellikle TitleChip) üstte ortada sabit kalırken liste içeriği altında kaydırılır.

Aşağıdaki kod, başlık yuvası içeren dikey bir liste oluşturur:

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

Programatik liste işlemleri için liste durumunu kullanma

Listenin farklı yönlerini kontrol etmek ve gözlemlemek için ListState özelliğini kullanın. Örneğin, firstVisibleItemIndex ve firstVisibleItemScrollOffset özelliklerini kullanarak kaydırma konumunu kontrol edebilirsiniz.

Bu durumu, rememberListState kullanarak scrollToItem ve animateScrollToItem ile programatik olarak kaydırmak için kullanabilirsiniz.