Dải điều hướng

Thanh điều hướng cung cấp quyền truy cập vào các đích đến trong ứng dụng chạy trên thiết bị có màn hình lớn. Bạn nên sử dụng dải điều hướng cho:

• Đích đến cấp cao nhất cần truy cập được ở mọi nơi trong ứng dụng
• Từ 3 đến 7 điểm đến chính
• Bố cục cho máy tính bảng hoặc máy tính để bàn

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 thành phần kết hợp NavigationRail với NavigationRailItem để triển khai thanh điều hướng trong ứng dụng. NavigationRailItem đại diện cho một mục dải nội dung trong cột dải nội dung.

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

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

Ví dụ: Điều hướng dựa trên thanh điều hướng dọc

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

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

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

Điểm chính

• NavigationRail hiển thị một cột dọc gồm các mục thanh điều hướng, 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 thanh điều hướng đượ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 trên thanh điều hướng, 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 NavigationRailItem cập nhật trạng thái selectedDestination để làm nổi bật mục thanh điều hướng được nhấp vào.
• Hàm này 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 kết quả của đoạn mã trước:

Tài nguyên khác

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