이 가이드에서는 상단 앱 바의 탐색 아이콘이 탐색 작업을 실행하도록 하는 방법을 보여줍니다.
예
다음 스니펫은 작동하는 탐색 아이콘이 있는 상단 앱 바를 구현하는 방법을 보여주는 최소한의 예입니다. 이 경우 아이콘을 클릭하면 사용자가 앱의 이전 대상으로 이동합니다.
@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), ) } }
코드에 대한 핵심 사항
이 예시에서 다음 사항에 유의하세요.
- 컴포저블
TopBarNavigationExample
은() -> Unit
유형의 매개변수navigateBack
를 정의합니다. CenterAlignedTopAppBar
의navigationIcon
매개변수에navigateBack
을 전달합니다.
따라서 사용자가 상단 앱 뒤로 탐색 아이콘을 클릭할 때마다 navigateBack()
이 호출됩니다.
함수 전달
이 예에서는 아이콘에 뒤로 화살표를 사용합니다. 따라서 navigateBack()
의 인수는 사용자를 이전 대상으로 이동해야 합니다.
이렇게 하려면 TopBarNavigationExample
에 NavController.popBackStack()
호출을 전달합니다. 탐색 그래프를 빌드할 때 이를 실행합니다. 예를 들면 다음과 같습니다.
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
추가 리소스
앱에서 탐색을 구현하는 방법에 관한 자세한 내용은 다음 가이드 시리즈를 참고하세요.