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. Các thẻ này hiển thị các đích đến 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 khu vực nội dung để phân tách thêm nội dung liên quan và thiết lập hệ phân cấp. Các thẻ này là cần thiết khi màn hình yêu cầu nhiều cấp thẻ.

Trang này cho biết cách hiển thị các thẻ chính trong ứng dụng của bạn cù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 Tab, PrimaryTabRow và SecondaryTabRow để triển khai 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 trực quan 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 việc 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à sẽ không phản hồi các lượt nhấp.

Ví dụ: Điều hướng 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 trong ứng dụng:

@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ẻ theo chiều 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, 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 thẻ đã chọn.
  • startDestination.ordinal lấy chỉ mục số (vị trí) của mục nhập 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 sẽ cập nhật trạng thái selectedDestination để làm nổi bật thẻ đã 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 – Thẻ
• Điều hướng bằng Compose