Biểu tượng 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) →
Kính AI
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 Icon được thiết kế riêng để kết xuất các biểu tượng đơn sắc. Icon có thể chấp nhận ImageVector, ImageBitmap hoặc Painter làm nguồn. Icon, tương tự như Text, có thể áp dụng màu sắc một cách thông minh dựa trên giao diện người dùng xung quanh. Mặc dù theo mặc định, kích thước sẽ do LocalIconSize cung cấp, nhưng bạn cũng có thể đặt kích thước biểu tượng tuỳ chỉnh.

Ví dụ: Tạo một hộp có biểu tượng ngôi sao lớn

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

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

  • Nguồn của biểu tượng tải một tài nguyên có thể vẽ vectơ XML cục bộ (R.drawable.ic_star) bằng painterResource, minh hoạ phương pháp được đề xuất để tích hợp biểu tượng vào giao diện người dùng Jetpack Compose Glimmer mà không cần đến chi phí của thư viện bên ngoài.
  • Kích thước của biểu tượng được tuỳ chỉnh bằng cách đặt GlimmerTheme.iconSizes.large bằng một đối tượng sửa đổi, minh hoạ cách ghi đè kích thước được xác định trước của Jetpack Compose Glimmer.
  • Bạn có thể tuỳ chỉnh màu sắc của biểu tượng bằng cách đặt GlimmerTheme.colors.primary bằng tham số tint, áp dụng tính năng tô màu biểu tượng một màu để đảm bảo tính nhất quán về hình ảnh.