Mit Jetpack Compose verlässt Android implizite Wege, sich mit Fragmenttransaktionen, Navigationen und Absichten für Aktivitäten fortzubewegen. Heutzutage sollte die App zu Beginn alle möglichen Wege angeben, die Benutzer einschlagen können.

Jetpack Compose bietet eine native Möglichkeit, wie Sie durch Ihre verschiedenen Komponenten navigieren können. Mit NavHost und NavController können Sie Ihre Composables nach Bedarf pushen oder poppen. Kommen wir also dazu.

Abhängigkeiten

Zunächst müssen Sie Ihrem Projekt eine Abhängigkeit hinzufügen. Um die aktuelle Version zu erhalten, gehen Sie hier .

implementation "androidx.navigation:navigation-compose:2.5.3"

Implementierung

Zunächst werden NavHost und NavController in das Projekt eingeführt .

NavHost hostet die Deklaration der Routen, die Benutzer nehmen können. NavController bietet eine API, um sich auf den angegebenen Routen zu bewegen. Route ist ein Pfad, der für jeden Bildschirm/andere zusammensetzbare Elemente, die in der App angezeigt werden könnten, eindeutig ist.

Instanziierung

NavController wird mit RememberNavController() instanziiert, sodass der NavController selbst bei der Neuerstellung von Composables derselbe ist.

Startziel

Der NavHost mit NavController und Startziel werden deklariert. Startziel ist der Name unserer ersten Bildschirmroute.

Deklaration von Routen

Alle Optionen sind deklariert, wohin sich ein Benutzer bewegen kann. Beide Bildschirme müssen Routen deklarieren. Der Routenname ist eindeutig, da der NavController sie verwendet, um das nächste anzuzeigende Composable zu identifizieren.

Jedes Composable kann über navcontroller.navigate (“route to composable”) angezeigt werden.

Um den Zurück-Button des Benutzers nachzuahmen, kann der navcontroller.popBackStack() verwendet werden. Dadurch wird das aktuelle Composable aus dem Stapel aller Composables herausgeholt.

Stack kann als Verlauf der Composables/Screens betrachtet werden, also ist der erste Screen der Stamm und andere Composables werden darauf gelegt. Wenn Sie also zum zweiten Bildschirm navigieren, wird der zweite Bildschirm oben auf dem Stapel hinzugefügt. Durch Herausspringen des Stapels wird das oberste zusammensetzbare Element entfernt.

Aufräumen

Um in Zukunft fehleranfälliger zu sein, sollten [aths sauberer deklariert werden. Vermeiden Sie es also, überall Zeichenfolgen hinzuzufügen, und erstellen Sie die eigenständige Datei, in der Sie alle Routen für Ihre App ablegen. Danach sollten die deklarierten Konstanten verwendet werden. Peinliche Tippfehler werden in Zukunft vermieden. Darüber hinaus bietet es eine anschaulichere Ansicht darüber, wie die App strukturiert ist.

Gehen Sie durch mehrere Bildschirme und zurück zum Stamm

Von nun an ist es einfach, weitere Bildschirme zu unserer Navigation hinzuzufügen. Der NavHost muss um ein weiteres Composable erweitert werden, und Bildschirme müssen mehr Schaltflächen zum Bewegen annehmen.

Der dritte Bildschirm enthält eine Schaltfläche, die den Benutzer zum ersten Bildschirm zurückführt und alle gestapelten Komponenten bereinigt.

Um mehrere Composables im Stack zu platzieren, kann navController.popBackStack („Screen where you want to stop the popping“, inclusive: false) verwendet werden.

Der Inclusive- Parameter teilt uns mit, ob das angestrebte Composable ebenfalls entfernt werden soll. Das Entfernen des ersten Bildschirms würde zu einem leeren Bildschirm führen, daher wird der Wert false übergeben.

Werte an den Bildschirm übergeben

Die meisten Apps möchten Informationen oder Daten anzeigen, die von der vorherigen Auswahl des Benutzers abhängen. Ein anderer Bildschirm muss wissen, was angezeigt werden soll, also muss der Wert übergeben werden.

Dies geschieht, indem der Wert in die Route eingefügt wird, sodass der Wert als Zeichenfolge codiert und dann auf einem anderen Bildschirm analysiert wird.

Erklärung

Zuerst muss die Route das Vorhandensein des Werts deklarieren, was so gemacht wird:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

Der erste Bildschirm enthält nun ein Textfeld, dessen Inhalt an den zweiten Bildschirm weitergegeben wird.

Übergeben Sie keine komplexen Daten an Ansichten in der Navigation

Es sollte nur ein Wert an die Ansicht übergeben werden. Andere Daten sollten mit Hilfe des ViewModel oder einer anderen Logikeinheit erhalten werden. Es wird Ihren Code viel sauberer und testbarer machen.

Wenn Sie beispielsweise Details zu einem Produkt oder Benutzer anzeigen möchten, sollte eine ID nur an die Ansicht übergeben werden. Die Logikeinheit erhält die ID und gräbt nähere Informationen aus dem Internet oder einer Datenbank aus. Die Daten werden dann ohne Zuhilfenahme der Navigationskomponenten direkt an die Ansicht übergeben.

Ressourcen:

Mehr aus der Android-Entwicklung: