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 đề theo 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 TitleChipSample() {
    TitleChip { Text("Messages") }
}

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@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ã

  • Thẻ tiêu đề được căn giữa theo chiều ngang, đây là chế độ căn chỉnh thông thường cho thẻ 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 ngữ 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.
  • Thẻ tiêu đề không có tính tương tác. Nếu 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.