[Jetpack Compose] 9. Navigation - 화면 전환

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=sHyQV3Jz_fA&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=7 

---

gradle

화면 전환을 할 때 Navigation을 사용함

버튼을 통해 화면 전환하는 예제를 해볼 예정

 

module 수준의 build.gradle에 dependency를 추가해야 함

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

---

NavController

Navigation을 순조롭게 도와주는 Composable

 

전환할 화면을 NavHost 안에 넣어주면 됨

@Preview(showBackground = true)
@Composable
fun TestView() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "first",
    ) {
        composable("first") {
            FirstScreen(navController)
        }
        composable("second") {
            SecondScreen(navController)
        }
    }
}

 

첫번째 화면

@Composable
fun FirstScreen(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text("text = 첫번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigate("second")
        }) {
            Text("두 번째")
        }
    }
}

 

두번째 화면

@Composable
fun SecondScreen(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text("text = 두번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigateUp()
            // 얘로 써도 뒤로가기 됨
            // navController.popBackStack()
        }) {
            Text("뒤로 가기")
        }
    }
}

---

결과물

버튼으로 화면 전환이 잘 된다