Tab

Thẻ cho phép bạn sắp xếp các nhóm nội dung có liên quan. Có hai loại thẻ:

• Thẻ chính: Được đặt ở đầu ngăn nội dung, bên dưới thanh ứng dụng trên cùng. Thanh này hiển thị các đích đến của nội dung chính và nên được sử dụng khi chỉ cần một nhóm thẻ.
• Thẻ phụ: Được dùng trong một vùng nội dung để phân tách thêm nội dung có liên quan và thiết lập hệ phân cấp. Thẻ phụ là cần thiết khi một màn hình yêu cầu nhiều cấp thẻ.

Hình 1. Thẻ chính (1) và thẻ phụ (2).

Trang này hướng dẫn cách hiển thị các thẻ chính trong ứng dụng của bạn 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 các thành phần kết hợp Tab, PrimaryTabRow và SecondaryTabRow để triển khai các thẻ. Thành phần kết hợp Tab đại diện cho một thẻ riêng lẻ trong hàng và thường được dùng bên trong PrimaryTabRow (đối với thẻ chỉ báo chính) hoặc SecondaryTabRow (đối với thẻ chỉ báo phụ).

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

• selected: Xác định xem thẻ 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 thẻ. Đâ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 thẻ đã chọn hoặc tải nội dung tương ứng.
• text: Hiển thị văn bản trong thẻ. Không bắt buộc.
• icon: Hiển thị một biểu tượng trong thẻ. Không bắt buộc.
• enabled: Kiểm soát xem thẻ có được bật và có thể tương tác hay không. Nếu được đặt thành false, thẻ sẽ xuất hiện ở trạng thái tắt và không phản hồi khi người dùng nhấp vào.

Ví dụ: Di chuyển dựa trên thẻ

Đoạn mã sau đây triển khai một thanh điều hướng trên cùng có các thẻ để di chuyển giữa các màn hình khác nhau trong một ứng dụng:

Lưu ý: Mã nguồn đầy đủ bao gồm mã thiết lập cấu trúc điều hướng cơ bản cho ví dụ sau.

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Điểm chính

• PrimaryTabRow hiển thị một hàng thẻ ngang, trong đó mỗi thẻ 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 thẻ đã chọn.
  • startDestination.ordinal lấy chỉ mục (vị trí) dạng số của mục enum Destination.SONGS.
• Khi bạn nhấp vào một thẻ, hàm lambda onClick sẽ gọi navController.navigate(route = destination.route) để chuyển đến màn hình tương ứng.
• Hàm lambda onClick của Tab cập nhật trạng thái selectedDestination để làm nổi bật thẻ đượ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:

Hình 2. 3 thẻ (Bài hát, Đĩa nhạc và Danh sách phát) được sắp xếp theo chiều ngang.

Tài nguyên khác

• Material 3 – Thẻ
• Điều hướng bằng Compose