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