本指南將說明如何讓頂端應用程式列中的導覽圖示執行導覽動作。
範例
下列程式碼片段是實作頂端應用程式列 (含功能性導覽圖示) 的簡易範例。在這種情況下,圖示會將使用者帶往應用程式中的先前目的地:
@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...
其他資源
如要進一步瞭解如何在應用程式中導入導覽功能,請參閱下列系列指南: