Dải điều hướng

Dải đ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:

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

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

Bề mặt 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 biểu thị một mục trong dải điều hướng trong cột dải điều hướng.

NavigationRailItem bao gồm các tham số chính sau:

• selected: Xác định xem mục trong dải điều hướng hiện tại có được làm nổi bật bằng 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 trong 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 trong 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 trong dải điều hướng. Không bắt buộc
• icon: Hiển thị biểu tượng trong mục trong 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 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 trong 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ý quá trình điều hướng trong một NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } quản lý trạng thái của mục trong dải điều hướng đã chọn.
  • startDestination.ordinal nhận chỉ mục số (vị trí) của mục nhập enum Destination.SONGS.
• Khi một mục trong dải điều hướng được nhấp vào, 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 trong dải đ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