Dải điều hướng

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

• Các đích đến cấp cao nhất cần truy cập được ở bất kỳ đâu trong ứng dụng
• Từ 3 đến 7 điểm đến chính
• Bố cục 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ị dải điều hướng trong ứng dụng của mình 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 dải điều hướng trong ứng dụng. NavigationRailItem đại diện cho một mục dải trong cột dải.

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

• selected: Xác định xem mục dải điều hướng hiện tại có được làm nổi bật trực quan hay không.
• onClick(): Hàm lambda bắt buộc xác định hành động sẽ được thực hiện khi người dùng nhấp vào mục dải đ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 dải đ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 dải điều hướng. Không bắt buộc.
• icon: Hiển thị một biểu tượng trong mục dải điều hướng. Không bắt buộc.

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

Đoạn mã sau đây triển khai một 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 dải đ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, thực thể này 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 dải ô hiện đã chọn.
  • startDestination.ordinal lấy chỉ mục số (vị trí) của mục nhập enum Destination.SONGS.
• Khi người dùng nhấp vào một mục trên dải điều hướng, navController.navigate(route = destination.route) sẽ được gọi để chuyển đến màn hình tương ứng.
• Lambda onClick của NavigationRailItem cập nhật trạng thái selectedDestination để làm nổi bật mục dải điều hướng đã nhấp một cách trực quan.
• Phương thức 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