Title chips trong Jetpack Compose Glimmer

Các thiết bị XR áp dụng

Hướng dẫn này giúp bạn tạo trải nghiệm cho các loại thiết bị XR này.

Tìm hiểu về các loại thiết bị thực tế mở rộng (XR) →

Tìm hiểu về các loại thiết bị thực tế mở rộng (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ẻ. Sử dụng khối 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ì các 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 khối tiêu đề có nhãn "Thành phần" bên cạnh danh sách thành phần có thể cuộn.

Ví dụ cơ bản: Hiển thị một khối tiêu đề ngắn

Bạn có thể tạo một khối tiêu đề ngắn bằng rất ít mã:

TitleChip { Text("Messages") }

Ví dụ chi tiết: Hiển thị một chip tiêu đề bằng thẻ

Để sử dụng một thành phần 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 cho biết cách sử dụng một 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ã

• Spacer có chiều cao cố định để cung cấp khoảng cách dọc chính xác, do TitleChipDefaults.AssociatedContentSpacing xác định, giữa hai thành phần.