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 các ứ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 ở bất cứ đâu trong ứng dụng
• Từ 3 đến 7 đích đến chính
• Bố cục máy tính bảng hoặc máy tính

Trang này hướng dẫ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 một dải điều hướng trong ứng dụng. NavigationRailItem biểu thị một mục 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 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(): Một 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 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 khác nhau trong một ứ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ý 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 dải điều hướng hiện được chọn.
  • startDestination.ordinal lấy chỉ mục số (vị trí) của mục enum Destination.SONGS.
• Khi một mục 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 bằng hình ảnh mục dải điều hướng đã nhấp.
• 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