Tab

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.

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ột 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 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 sẽ được 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 bạn đặt giá trị này thành false, thẻ sẽ hiển thị ở 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ẻ đ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 thẻ, 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 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