Temel bilgileri anlama ve uygulama

Gezinme, kullanıcıların uygulamanızdaki hareketlerini ifade eder. Kullanıcılar genellikle kullanıcı arayüzü öğelerine dokunarak veya tıklayarak bu öğelerle etkileşim kurar. Uygulama da yeni içerikler 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.

Şekil 1. Geri yığınının kullanıcı gezinme etkinlikleriyle nasıl değiştiğini gösteren şema.

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 beklediği için ö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ü olan bir anlık görüntü durumu yedekli 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 NavDisplay kullanarak durumunu 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 birleştirilebilir 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 giriş sağlayıcı 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.

Giriş sağlayıcı oluşturmanın iki yolu vardır: doğrudan lambda işlevi oluşturarak veya entryProvider DSL'yi kullanarak.

Doğrudan Giriş Sağlayıcı işlevi oluşturma

Genellikle, anahtarlarınızın her biri için bir dal içeren bir when ifadesi kullanarak Giriş Sağlayıcı işlevi oluşturursunuz.

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 ihtiyacını ortadan kaldırarak ve her biri için bir NavEntry oluşturarak 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. Değiştiği zaman NavDisplay'un yeniden oluşturulmasını tetiklemesi için gözlemlenebilir bir List'tir.
• 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:

Şekil 2. NavDisplay iki hedefi olan varsayılan davranıştır.

Özet

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

3.şekil Navigasyon 3'te verilerin çeşitli nesneler arasında nasıl aktığını gösteren şema.

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.