CODEWITHSUNDEEP
android-studiokotlinandroid-jetpack-composeandroid-jetpacknavcontroller
有朋自远方来
有朋自远方来

Reputation: 71

I want to find a better way to use NavHostController in compose

@Composable
fun AppPage() {
    val navController = rememberNavController()
    //first way
    Page1(navController)
    //second way
    Page3 {
        navController.navigate("AnyRoute")
    }
}

@Composable
fun Page1(navController: NavHostController) {
    //do anything
    Page2(navController = navController)
}

@Composable
fun Page2(navController: NavHostController) {
    navController.navigate("AnyRoute")
}

@Composable
fun Page3(toLogin: () -> Unit) {
    //do anything
    Page4 {
        toLogin.invoke()
    }
}

@Composable
fun Page4(toLogin: () -> Unit) {
    Text(text = "test", modifier = Modifier.clickable {
        toLogin.invoke()
    })
}

I don't think these two methods are very good. Both of them can easily lead to too many parameters in the method, especially the second one, and I feel it's very troublesome. Is there a good way to use navigation for navigation

Upvotes: 2

Views: 1671

Answers (1)

JD74
JD74

Reputation: 425

This is how I do my navigation. I did my best to apply it to your example.

In your Main Activity. Pass to the Navigator any parameters your screens will need such as viewModels.

val navController = rememberNavController()
Navigator(navController, toLogin: () -> Unit)

Create a file like below with an object for each screen you want.
sealed class Screens(val route: String) {
    object Page1: Screens("Page1")
    object Page2: Screens("Page2")
    object Page3: Screens("Page3")
    object Page4: Screens("Page4")
}

Create a composable as follows. The startDestination is what screen the app will open to when started.
@Composable
fun Navigator (navController: NavHostController,
              ) {
    NavHost(
        navController = navController,
        startDestination = Screens.Page1.route)
    {
        composable(route = Screens.Page1.route){
            Page1(viewModel, navController)
        }
        composable(route = Screens.Page2.route){
            Page2(viewModel, navController)
        }
        composable(route = Screens.Page3.route){
            Page3(viewModel, navController)
        }
        composable(route = Screens.Page4.route){
            Page4(viewModel, navController)
        }
    }
}

From any of your composables you can navigate to another with this.
navController.navigate(Screens.Page3.route)

Upvotes: 0

Related Questions