앱 개발(android)

[Jetpack Compose | Kotlin] 화면 전환

나찬비 2023. 8. 29. 11:50

💡https://www.youtube.com/watch?v=4gUeyNkGE3g

 

Navigation.kt

package com.example.medicine.navigation

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Screen.MainScreen.route ) {
        composable(Screen.MainScreen.route) {
            MainScreen(navController = navController)
        }
        composable(
            route = Screen.SettingScreen.route+"/{name}",
            arguments = listOf(
                navArgument("name") {
                    type = NavType.StringType
                    defaultValue = "Name"
                    nullable = true
                }
            )
        ) {entry ->
            SettingScreen(name = entry.arguments?.getString("name"))
        }
    }
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen(navController: NavController) {
    var text by remember {
        mutableStateOf("")
    }

    Column {
        TextField(value = text, onValueChange = {
            text = it
        })
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = {
            navController.navigate(Screen.SettingScreen.withArgs(text))
        }) {
            Text(text = "다른 화면으로 고.")
        }
    }

}

@Composable
fun SettingScreen(name: String?) {
    Box() {
        Text(text = "Hello, ${name}")
    }
}

 

Screen

 

package com.example.medicine.navigation

sealed class Screen(val route: String) {
    object MainScreen : Screen("main_screen")
    object SettingScreen : Screen("setting_screen")

    fun withArgs(vararg args: String) : String {
        return buildString {
            append(route)
            args.forEach {arg->
                append("/${arg}")
            }
        }
    }
}

 

MainActivity.kt

package com.example.medicine

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.medicine.navigation.Navigation
import com.example.medicine.ui.theme.MedicineTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Navigation()
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MedicineTheme {
        Greeting("Android")
    }
}

 

 

+ 전 화면을 지우고 싶을 때

popUpTo(0) 사용

navController.navigate(Screen.MainScreen.route) { popUpTo(0) }

💡 https://stackoverflow.com/questions/66845899/compose-navigation-remove-previous-composable-from-stack-before-navigating