[Kotlin] Compose 입문 #3 - Navigation, 화면 전환, 값 넘겨주기

Gradle 추가

// Navigation
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"

 

초기 세팅

setContent {
            val navController = rememberNavController()

            NavHost(
                navController = navController,
                startDestination = "first", // 첫 번째로 표시할 내용
            ) {
                // 화면을 표시할 내용들을 composable로 지정
                composable("first") {
                    FirstScreen()
                }
                composable("second") {
                    SecondScreen()
                }
                composable("third") {
                    ThirdScreen()
                }
            }
        }
    }
}

// 화면 3개 만들기

@Composable
fun FirstScreen() {

}

@Composable
fun SecondScreen() {

}

@Composable
fun ThirdScreen() {

}

rememberNavController를 이용해 navController 생성하고

NavHost 생성 → 화면 3개를 Composable로 만들고 composable 함수로 지정한다

가장 먼저 보여줄 화면을 startDestination으로 지정

 

 

 

첫번째 화면

@Composable
fun FirstScreen() {
    val (value, setValue) = remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "첫 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {}) {
            Text(text = "두 번째 !")
        }
        Spacer(modifier = Modifier.height(16.dp))
        TextField(value = value, onValueChange = setValue)
        Button(onClick = {}) {
            Text(text = "세 번째 !")
        }
    }
}

 

두번째 화면

@Composable
fun SecondScreen() {

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "두 번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {}) {
            Text(text = "뒤로 가기 !")
        }
    }

}

 

세번째 화면

@Composable
fun ThirdScreen(value: String) {

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "세 번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Text(value)
        Button(onClick = {}) {
            Text(text = "뒤로 가기 !")
        }
    }

}

세번째 화면에서는 첫번째 화면에서 넘어온 text를 받아와야 한다 → value값으로 받기

 

 

 

첫번째 → 두번째로 넘어가기

: setContent의 navController 사용!

composable("first") {
                    FirstScreen(navController)
                }

composable(”first”)에서 navController를 넘겨준다

@Composable
fun FirstScreen(navController: NavController) {
    val (value, setValue) = remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "첫 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigate("second")
        })

변수로 navController를 받고,

Button 클릭시 navigate → route는 second로

 

 

 

두번째 화면에서 뒤로가기 버튼 활성화

fun SecondScreen(navController: NavController) {

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(text = "두 번째 화면")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            navController.navigateUp()
            navController.popBackStack()
        })

동일하게 navController를 인자로 받고

navigateUp() 이나, popBackStack() 중에 하나 택하여 사용

 

 

첫번째 화면에서 입력한 값을 세번째 화면에서 받아오기

setContent의 NavHost에서 thirdScreen 값을 다음과 같이 수정한다

composable("third/{value}") { backStackEntry ->
                    ThirdScreen(
                        navController = navController,
                        // backStack에서 넘겨오는 값을 받아오
                        value = backStackEntry.arguments?.getString("value") ?: "",)
                }

third로 받아오는 value값이 있음을 명시하고 backStackEntry.argument?.getString(”value”)로 안전한 호출. null값일 경우 비어있는 상태

첫번째 화면에서 버튼 클릭시 third로 이동하고, value값을 넘겨준다

Button(onClick = {
            // value값이 없을 때는 작동하지 않도록
            if (value.isNotEmpty()) {
                navController.navigate("third/$value")
            }
        }) {
            Text(text = "세 번째 !")
        }