Tab

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

• Thẻ chính: Nằm ở đầ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à bạn nên dùng khi chỉ cần một nhóm thẻ.
• Thẻ phụ: Được dùng trong một vùng nội dung để tách biệt thêm nội dung có liên quan và thiết lập hệ phân cấp. Bạn cần dùng các thẻ này khi một màn hình yêu cầu nhiều hơn một cấp thẻ.

Trang này trình bày 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 có liên quan và hệ thống điều hướng cơ bản.

Bề mặt 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 các thẻ chỉ báo chính hoặc SecondaryTabRow (đối với các thẻ chỉ báo phụ).

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

• selected: Xác định xem thẻ 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 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 tab. 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à sẽ không phản hồi khi 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 khác nhau trong một ứ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 một 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ẻ, lambda onClick sẽ gọi navController.navigate(route = destination.route) để chuyển đến màn hình tương ứng.
• Lambda onClick của Tab cập nhật trạng thái selectedDestination để làm nổi bật bằng hình ảnh thẻ đã nhấp.
• Lambda này gọi thành phần kết hợp AppNavHost, chuyể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