Developing Apps with Jetpack Compose for Android【03】 - Compose Navigation

Introduction
  • This is the third part of this series
    Having had the opportunity to develop an entire project using Compose
    After some exploration
    I have some insights to share

    I decided to write this process into notes to share with everyone
Initial Setup
  • The libraries used are as follows:
Function
Lib
build
gradle.kts + toml
api
okhttp + retrofit2
navigation
navigation-compose
design
material 3
di
hilt
ui
jetpack compose
json
kotlinx.serialization
db
room
Implementing Navigation for Compose
  • Here we plan to use a Main activity to navigate and switch to other screens
    So today we will implement NavHost in Compose
step1. Create enums for each screen
  • First, define an enum
    It will contain the content you expect to navigate to
    It can be expanded gradually as needed
step2. Define Compose Screen
  • Implement the screens you need, for example:
step3. Create routers for each screen
  • Since we will use NavGraphBuilder
    Extend NavGraphBuilder to specify the router for each screen
    Here, we use the previously defined Login as a reference indicator for its router
    To navigate to the LoginScreen, add the screen in the lambda
step4. Register each screen
  • Next, add all the screens you want to navigate to in the NavHost
    startDestination: your starting screen
    navController: used to specify the navigation controller

    To switch screens, simply control it with navController
    For example: navController.navigate(ElegantAccessScreen.Feedback.name)
step5. Achieve multiple screens in one activity
  • Finally, when you want to add a new screen
    Simply implement the Screen


Practical use:

Jump back to the table of contents

You might also enjoy