Thanh đ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.

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

• 3 đến 5 đích đến có cùng tầm quan trọng
• Kích thước cửa sổ thu gọn
• Các đí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 với 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(): 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. Đâ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 đã chọn hoặc tải nội dung tương ứng.
• 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 dưới cùng

Đoạn mã sau đây triển khai một thanh điều hướng dưới cùng có các mục để người dùng có thể di chuyển giữa các màn hình 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, 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 đang được chọn.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } quản lý trạng thái của mục hiện đang được 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, navController.navigate(route = destination.route) sẽ được gọi để chuyển đến màn hình tương ứng.
• Lambda onClick của NavigationBarItem sẽ cập nhật trạng thái selectedDestination để làm nổi bật mục đã 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 thanh điều hướng thu được 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