Temel bilgileri anlama ve uygulama

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Gezinme, kullanıcıların uygulamanızda nasıl hareket ettiğini ifade eder. Kullanıcılar genellikle kullanıcı arayüzü öğeleriyle dokunarak veya tıklayarak etkileşim kurar ve uygulama yeni içerik göstererek yanıt verir. Kullanıcı önceki içeriğe dönmek isterse geri hareketini kullanır veya geri düğmesine dokunur.

Gezinme durumunu modelleme

Bu davranışı modellemenin uygun bir yolu, içerik grubu kullanmaktır. Kullanıcı ileri giderek yeni içeriğe gittiğinde bu içerik grubun en üstüne taşınır. Kullanıcı bu içerikten geri döndüğünde, içerik yığından çıkarılır ve önceki içerik gösterilir. Gezinme terimlerinde bu yığın, kullanıcının geri dönebileceği içeriği temsil ettiği için genellikle geri yığın olarak adlandırılır.

Arka yığın oluşturma

Gezinme 3'te, geri yığın aslında içerik içermez. Bunun yerine, anahtarlar olarak bilinen içeriğe referanslar içerir. Anahtarlar herhangi bir türde olabilir ancak genellikle basit, serileştirilebilir veri sınıflarıdır. İçerik yerine referans kullanmanın avantajları şunlardır:

• Tuşları arka yığına iterek gezinmek kolaydır.
• Anahtarlar serileştirilebilir olduğu sürece arka yığın kalıcı depolamaya kaydedilebilir. Bu sayede, yapılandırma değişikliklerinden ve işlem sonlandırılmasından etkilenmez. Bu, kullanıcıların uygulamanızdan ayrılıp daha sonra geri gelip aynı içeriğin gösterildiği yerden devam etmeyi beklemesi nedeniyle önemlidir. Daha fazla bilgi için Geri yığınınızı kaydetme başlıklı makaleyi inceleyin.

Navigation 3 API'deki temel kavramlardan biri, geri yığınının size ait olmasıdır. Kitaplık:

• Arka yığınınızın, T arka yığınınızın keys türü olduğu, anlık görüntü durumuyla desteklenen bir List<T> olması gerekir. Any kullanabilir veya daha güçlü anahtarlar sağlayabilirsiniz. "İtme" veya "pop" terimlerini gördüğünüzde, temel uygulama bir listenin sonuna öğe eklemek veya listeden öğe kaldırmaktır.
• Arka yığınınızı gözlemler ve durumunu NavDisplay kullanarak kullanıcı arayüzünde yansıtır.

Aşağıdaki örnekte, anahtarların ve geri yığınının nasıl oluşturulacağı ve kullanıcı gezinme etkinliklerine yanıt olarak geri yığınının nasıl değiştirileceği gösterilmektedir:

// Define keys that will identify content
data object ProductList
data class ProductDetail(val id: String)

@Composable
fun MyApp() {

    // Create a back stack, specifying the key the app should start with
    val backStack = remember { mutableStateListOf<Any>(ProductList) }

    // Supply your back stack to a NavDisplay so it can reflect changes in the UI
    // ...more on this below...

    // Push a key onto the back stack (navigate forward), the navigation library will reflect the change in state
    backStack.add(ProductDetail(id = "ABC"))

    // Pop a key off the back stack (navigate back), the navigation library will reflect the change in state
    backStack.removeLastOrNull()
}
BasicSnippets.kt

İçerik anahtarlarını çözme

İçerik, Navigasyon 3'te bir derlenebilir işlev içeren bir sınıf olan NavEntry kullanılarak modellenir. Bir hedef (kullanıcı tarafından ileri ve geri gidilebilecek tek bir içerik parçası) temsil eder.

NavEntry, meta veriler (içerikle ilgili bilgiler) de içerebilir. Bu meta veriler, NavEntry içeriğinin nasıl gösterileceğine karar vermeleri için NavDisplay gibi kapsayıcı nesneler tarafından okunabilir. Örneğin, meta veriler belirli bir NavEntry için varsayılan animasyonları geçersiz kılmak amacıyla kullanılabilir. NavEntrymetadata, String anahtarlarının Any değerleriyle eşlendiği bir haritadır ve çok yönlü veri depolama alanı sağlar.

key birimini NavEntry birimine dönüştürmek için bir entryProvider oluşturun. Bu, bir key kabul eden ve bu key için bir NavEntry döndüren bir işlevdir. Genellikle NavDisplay oluştururken lambda parametresi olarak tanımlanır.

entryProvider oluşturmanın iki yolu vardır: doğrudan lambda işlevi oluşturarak veya entryProvider DSL'sini kullanarak.

Doğrudan entryProvider işlevi oluşturma

Genellikle, when ifadesi kullanarak entryProvider işlevi oluşturursunuz. Bu işlev, anahtarlarınızın her biri için bir dal içerir.

entryProvider = { key ->
    when (key) {
        is ProductList -> NavEntry(key) { Text("Product List") }
        is ProductDetail -> NavEntry(
            key,
            metadata = mapOf("extraDataKey" to "extraDataValue")
        ) { Text("Product ${key.id} ") }

        else -> {
            NavEntry(Unit) { Text(text = "Invalid Key: $it") }
        }
    }
}
BasicSnippets.kt

entryProvider DSL'yi kullanma

entryProvider DSL, anahtar türlerinizin her biri için test yapma ve her biri için bir NavEntry oluşturma ihtiyacını ortadan kaldırarak lambda işlevinizi basitleştirebilir. Bunun için entryProvider oluşturucu işlevini kullanın. Anahtar bulunamazsa varsayılan yedek davranışı (hata oluşturma) da içerir.

entryProvider = entryProvider {
    entry<ProductList> { Text("Product List") }
    entry<ProductDetail>(
        metadata = mapOf("extraDataKey" to "extraDataValue")
    ) { key -> Text("Product ${key.id} ") }
}
BasicSnippets.kt

Sana Özel bölümünde aşağıdakilere dikkat edin:

• entry, belirli bir tür ve birleştirilebilir içerikle bir NavEntry tanımlamak için kullanılır.
• entry, NavEntry.metadata değerini ayarlamak için bir metadata parametresi kabul eder

Arka yığını görüntüleme

Geri yığını, uygulamanızın gezinme durumunu temsil eder. Arka yığın değiştiğinde uygulama kullanıcı arayüzü yeni arka yığın durumunu yansıtmalıdır. Gezinme 3'te NavDisplay, geri yığınınızı gözlemler ve kullanıcı arayüzünü buna göre günceller. Aşağıdaki parametrelerle oluşturun:

• Arka yığınınız: SnapshotStateList<T> türüne sahip olmalıdır. Burada T, arka yığın anahtarlarınızın türüdür. Gözlemlenebilir bir List olduğundan, değiştiğinde NavDisplay'un yeniden oluşturulmasını tetikler.
• Arka yığınınızdaki anahtarları NavEntry'lara dönüştürmek için bir entryProvider.
• İsteğe bağlı olarak onBack parametresine bir lambda sağlayın. Kullanıcı geri düğmesine bastığında bu işlev çağrılır.

Aşağıdaki örnekte NavDisplay öğesinin nasıl oluşturulacağı gösterilmektedir.

data object Home
data class Product(val id: String)

@Composable
fun NavExample() {

    val backStack = remember { mutableStateListOf<Any>(Home) }

    NavDisplay(
        backStack = backStack,
        onBack = { backStack.removeLastOrNull() },
        entryProvider = { key ->
            when (key) {
                is Home -> NavEntry(key) {
                    ContentGreen("Welcome to Nav3") {
                        Button(onClick = {
                            backStack.add(Product("123"))
                        }) {
                            Text("Click to navigate")
                        }
                    }
                }

                is Product -> NavEntry(key) {
                    ContentBlue("Product ${key.id} ")
                }

                else -> NavEntry(Unit) { Text("Unknown route") }
            }
        }
    )
}
BasicSnippets.kt

Varsayılan olarak NavDisplay, arka yığıntaki en üstteki NavEntry'ı tek bölmeli düzende gösterir. Aşağıdaki kayıtta bu uygulamanın çalıştığı gösterilmektedir:

Özet

Aşağıdaki şemada, Gezinme 3'teki çeşitli nesneler arasında verilerin nasıl aktığı gösterilmektedir:

1. Gezinme etkinlikleri değişiklikleri başlatır. Anahtarlar, kullanıcı etkileşimlerine yanıt olarak arka yığına eklenir veya yığından kaldırılır.

2. Arka yığın durumundaki değişiklik, içerik getirmeyi tetikler. NavDisplay (arka yığını oluşturan bir bileşen), arka yığını gözlemler. Varsayılan yapılandırmasında, en üstteki geri yığın girişini tek bir panel düzeninde gösterir. Arka yığıntaki en üst anahtar değiştiğinde NavDisplay, giriş sağlayıcıdan ilgili içeriği istemek için bu anahtarı kullanır.

3. Giriş sağlayıcı içerik sağlar. Giriş sağlayıcı, bir anahtarı NavEntry olarak çözen bir işlevdir. Giriş sağlayıcı, NavDisplay'ten bir anahtar aldıktan sonra hem anahtarı hem de içeriği içeren ilişkili NavEntry'ı sağlar.

4. İçerik gösterilir. NavDisplay, NavEntry'u alır ve içeriği gösterir.