Điều hướng từ thanh ứng dụng trên cùng

Hướng dẫn này minh hoạ cách bạn có thể tạo 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 giản về cách bạn có thể triển khai thanh ứng dụng trên cùng bằng biểu tượng điều hướng có 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 đó 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),
        )
    }
}
AppBar.kt

Các điểm chính về mã

Lưu ý những điều sau trong ví dụ này:

  • Thành phần kết hợp TopBarNavigationExample xác định một tham số navigateBack thuộc loại () -> Unit.
  • Hàm này truyền navigateBack cho tham số navigationIcon của CenterAlignedTopAppBar.

Do đó, mỗi khi người dùng nhấp vào biểu tượng điều hướng ở phần trên cùng của ứng dụng, thao tác này sẽ gọi navigateBack().

Truyền 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() sẽ đưa người dùng đến đích đến trước đó.

Để thực hiện việc này, hãy truyền TopBarNavigationExample một lệnh gọi đến NavController.popBackStack(). Bạn thực hiện việc này khi 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, hãy xem các hướng dẫn sau: