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

Question

@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

score 0 · Answer 1 · answered Apr 30 '23 at 01:11

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)

I may not have expressed it clearly, but what I mean is that if I use navController. navigate (AppRoute. Page1) and have many composite components, I need to pass the navController step by step, or use callbacks to return the jump event step by step to the place where the navController was first created. This can be cumbersome, such as when Page1 calls Page2() and Page2() calls Page3(), I need to pass navController from page1 all the way to page3, maybe more — 有朋自远方来, Apr 30 '23 at 02:54
@有朋自远方来 For my UI I use viewModels to do all the state calculations. I would think most of the parameters you need to pass could be held in a viewModel. Then you only have to pass the viewModel as a parameter. — JD74, Apr 30 '23 at 03:21

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

1 Answers1