상단 앱 바에서 이동

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

예

다음 스니펫은 기능적 탐색 아이콘이 있는 상단 앱 바를 구현하는 방법의 최소한의 예입니다. 이 경우 아이콘은 사용자를 앱의 이전 대상으로 안내합니다.

@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은 navigateBack 유형의 () -> Unit 매개변수를 정의합니다.
  • CenterAlignedTopAppBar의 navigationIcon 매개변수에 navigateBack을 전달합니다.

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

함수 전달

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

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

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

추가 리소스

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