Title chips trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ
Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.
Tìm hiểu về các loại thiết bị XR →
Kính hiển thị
Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, thành phần TitleChip là một thành phần không tương tác, cung cấp bối cảnh hoặc nhãn ngắn cho nội dung được liên kết, chẳng hạn như Card hoặc VerticalList.

Sử dụng các chip tiêu đề để cung cấp thông tin ngắn gọn như tiêu đề ngắn, tên danh mục hoặc chỉ báo trạng thái. Thông thường, bạn nên đặt các chip tiêu đề phía trên nội dung mà chúng mô tả để thiết lập mối quan hệ cấu trúc rõ ràng.

Hình 1. Ví dụ về khối tiêu đề có kiểu mặc định và khối tiêu đề cố định trong Jetpack Compose Glimmer. Mỗi khối tiêu đề đều có một nhãn (1) và biểu tượng hoặc thực thể tuỳ chọn ở đầu (2).

Ví dụ cơ bản: Tạo khối tiêu đề ngắn

Đoạn mã sau đây tạo một chip tiêu đề cơ bản:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

Ví dụ cơ bản: Tạo khối tiêu đề có biểu tượng

Đoạn mã sau đây tạo một chip tiêu đề có biểu tượng:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Ví dụ: Tạo khối tiêu đề bằng thẻ

Để sử dụng một chip tiêu đề với một thành phần khác, hãy đặt TitleChipDefaults.associatedContentSpacing chip tiêu đề lên trên thành phần khác trong thành phần kết hợp. Đoạn mã sau đây tạo một chip tiêu đề có thẻ:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Các điểm chính về mã

  • Chip tiêu đề được căn giữa theo chiều ngang, đây là chế độ căn chỉnh thông thường cho chip tiêu đề được đặt phía trên thẻ.
  • Spacer có chiều cao cố định để cung cấp khoảng cách dọc phù hợp giữa hai thành phần. Điều này được xác định bằng cách sử dụng TitleChipDefaults.associatedContentSpacing.
  • Sử dụng leadingIcon (không bắt buộc) để thêm bối cảnh trực quan bổ sung trước nội dung văn bản.
  • Chip tiêu đề tự động sử dụng kiểu caption cho văn bản.
  • Chip tiêu đề không có tính tương tác. Nếu bạn cần một nhãn có thể nhấp, hãy sử dụng Button hoặc một thành phần tương tác khác.