Hướng dẫn này minh hoạ cách bạn có thể làm cho biểu tượng điều hướng trong thanh ứng dụng ở trên cùng thực hiện các thao tác điều hướng.
Ví dụ
Đoạn mã sau đây là một ví dụ tối thiểu về cách bạn có thể triển khai thanh ứng dụng trên cùng có biểu tượng điều hướng chức năng. Trong trường hợp này, biểu tượng sẽ đưa người dùng đến đích đến trước đó của họ trong ứng dụng:
@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), ) } }
Các điểm chính về mã
Trong ví dụ này, hãy lưu ý những điều sau:
- Thành phần kết hợp
TopBarNavigationExample
xác định tham sốnavigateBack
thuộc loại() -> Unit
. - Phương thức này truyền
navigateBack
cho tham sốnavigationIcon
củaCenterAlignedTopAppBar
.
Do đó, bất cứ khi nào người dùng nhấp vào biểu tượng điều hướng trong ứng dụng trên cùng quay lại, hệ thống sẽ gọi navigateBack()
.
Truyền một hàm
Ví dụ này sử dụng mũi tên quay lại cho biểu tượng. Do đó, đối số cho navigateBack()
phải đưa người dùng về đích trước đó.
Để thực hiện việc này, hãy truyền cho TopBarNavigationExample
lệnh gọi đến NavController.popBackStack()
. Bạn thực hiện việc này ở nơi bạn tạo
biểu đồ điều hướng. Ví dụ:
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
Tài nguyên khác
Để biết thêm thông tin về cách triển khai tính năng điều hướng trong ứng dụng của bạn, hãy xem loạt hướng dẫn sau:
- Điều hướng bằng Compose
- Tạo NavController
- Thiết kế biểu đồ điều hướng
- Chuyển đến một thành phần kết hợp