상단 앱 바에서 이동

이 가이드에서는 상단 앱 바의 탐색 아이콘이 탐색 작업을 실행하도록 하는 방법을 보여줍니다.

예

다음 스니펫은 기능적 탐색 아이콘이 있는 상단 앱 바를 구현하는 최소한의 예입니다. 이 경우 아이콘을 클릭하면 사용자가 앱에서 이전에 방문한 대상으로 이동합니다.

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}
AppBar.kt

코드에 관한 핵심 사항

이 예시에서 다음 사항에 유의하세요.

  • 컴포저블 TopBarNavigationExample은 () -> Unit 유형의 매개변수 navigateBack을 정의합니다.
  • CenterAlignedTopAppBar의 navigationIcon 매개변수에 navigateBack을 전달합니다.

따라서 사용자가 상단 앱 뒤로 버튼에서 탐색 아이콘을 클릭할 때마다 navigateBack()가 호출됩니다.

함수 전달

이 예시에서는 아이콘에 뒤로 화살표를 사용합니다. 따라서 navigateBack()의 인수는 사용자를 이전 대상으로 이동시켜야 합니다.

이렇게 하려면 TopBarNavigationExample에 NavController.popBackStack() 호출을 전달합니다. 탐색 그래프를 빌드하는 위치에서 이를 실행합니다. 예를 들면 다음과 같습니다.

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

추가 리소스

앱에서 탐색을 구현하는 방법에 관한 자세한 내용은 다음 가이드 시리즈를 참고하세요.