Navigation ?

앱 내에서 한 화면에서 다른 화면으로 이동하는 기능

• 로그인 -> 홈화면
• 상품 목록 -> 상품 상세

기존 xml 방식에서는 fragment, intent등을 사용하여 진행하였으나, jetpackcompose에서는
함수 기반의 UI 구조에 맞게 NavHost,NavController, composable 같은 전용 컴포넌트를 사용

Jetpack Compose Navigation의 기본 구성요소

• navcontroller : 어떤 화면으로 이동할지 결정하는 컨트롤러
• navHost : 화면들을 등록해두는 공간, 출발점 지정
• composable ( route ) : 각각의 화면을 등록하는 부분
• navigate("route") : 지정한 경로로 이동

navigation/AppNavHost.kt

@Composable
fun AppNavHost(navController: NavHostController) {
    NavHost(navController = navController, 
    startDestination = "home", 
    modifier = Modifier.fillMaxSize()) {
        composable("home") { HomeScreen(navController) }
        composable("detail") { DetailScreen() }
    }
}

MainActivity.kt

// topbar 밑에 컨트롤러 들어감

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()

            Scaffold(
                topBar = {
                    TopAppBar(title = { Text("앱 테스트") })
                }
            ) { innerPadding ->
                Box(modifier = Modifier.padding(innerPadding)) {
                    AppNavHost(navController = navController)
                }
            }
        }
    }
}