상단 앱 바에서 이동

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

예

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

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton( {
                        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...

추가 리소스

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