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 AI
Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, thành phần TitleChip được thiết kế để cung cấp nhãn ngắn gọn, không tương tác cho nội dung được liên kết, chẳng hạn như Thẻ. Hãy sử dụng chip tiêu đề để hiển thị thông tin ngắn gọn như tiêu đề ngắn, tên hoặc trạng thái. Vì chip tiêu đề không thể lấy tiêu điểm hoặc tương tác, nên chúng chỉ đóng vai trò cung cấp thông tin trong giao diện người dùng Jetpack Compose Glimmer. Ví dụ: bạn có thể cung cấp một chip tiêu đề có nhãn "Ingredients" (Thành phần) bên cạnh danh sách thành phần có thể cuộn.

Hình 1. Ví dụ về một số kiểu chip tiêu đề trong Jetpack Compose Glimmer.

Chip tiêu đề mặc định và chip tiêu đề cố định được hiển thị. Chip tiêu đề cố định được hiển thị có đường viền.

  1. Nhãn chip tiêu đề
  2. Biểu tượng hoặc thực thể dẫn đầu (không bắt buộc)

Ví dụ cơ bản: Hiển thị chip tiêu đề ngắn

Bạn có thể tạo một chip tiêu đề ngắn với rất ít mã:

TitleChip { Text("Messages") }

Ví dụ chi tiết: Hiển thị chip tiêu đề có thẻ

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

@Composable
fun TitleChipExample() {
    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ã