Thanh điều hướng

Thanh điều hướng cho phép người dùng chuyển đổi giữa các đích đến trong một ứng dụng. Bạn nên sử dụng thanh điều hướng cho:

• 3 đến 5 đích đến có tầm quan trọng ngang nhau
• Kích thước cửa sổ thu gọn
• Đích đến nhất quán trên các màn hình ứng dụng

Trang này hướng dẫn bạn cách hiển thị thanh điều hướng trong ứng dụng bằng các màn hình liên quan và thao tác điều hướng cơ bản.

Nền tảng API

Sử dụng các thành phần kết hợp NavigationBar và NavigationBarItem để triển khai logic chuyển đổi đích đến. Mỗi NavigationBarItem đại diện cho một đích đến duy nhất.

NavigationBarItem bao gồm các thông số chính sau:

• selected: Xác định xem mục hiện tại có được làm nổi bật về mặt hình ảnh hay không.
• onClick(): Xác định hành động cần thực hiện khi người dùng nhấp vào mục. Logic để xử lý các sự kiện điều hướng, cập nhật trạng thái mục đã chọn hoặc tải nội dung tương ứng sẽ nằm ở đây.
• label: Hiển thị văn bản trong mục. Không bắt buộc.
• icon: Hiển thị một biểu tượng trong mục. Không bắt buộc.

Ví dụ: Thanh điều hướng phía dưới

Đoạn mã sau đây triển khai một thanh điều hướng phía dưới có các mục để người dùng có thể di chuyển giữa các màn hình khác nhau trong ứng dụng:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

Điểm chính

• NavigationBar hiển thị một tập hợp các mục, trong đó mỗi mục tương ứng với một Destination.
• val navController = rememberNavController() tạo và ghi nhớ một thực thể của NavHostController, quản lý hoạt động điều hướng trong NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } quản lý trạng thái của mục đã chọn.
  • startDestination.ordinal lấy chỉ mục (vị trí) dạng số của mục enum Destination.SONGS.
• Khi người dùng nhấp vào một mục, navController.navigate(route = destination.route) sẽ được gọi để chuyển đến màn hình tương ứng.
• Hàm lambda onClick của NavigationBarItem cập nhật trạng thái selectedDestination để làm nổi bật mục được nhấp vào.
• Logic điều hướng gọi thành phần kết hợp AppNavHost, truyền navController và startDestination để hiển thị nội dung thực tế của màn hình đã chọn.

Kết quả

Hình ảnh sau đây cho thấy thanh điều hướng từ đoạn mã trước:

Tài nguyên khác

• Material 3 – Thanh điều hướng
• Điều hướng bằng Compose