Nút biểu tượng 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, IconButton là một thành phần nhỏ gọn, có tính tương tác, được dùng để hiển thị các thao tác bổ sung chỉ bằng một lần nhấn.

Các nút biểu tượng có kích thước nhỏ hơn nút tiêu chuẩn nhưng vẫn duy trì ranh giới vật lý để đảm bảo người dùng dễ dàng tương tác trên kính hiển thị.

Đối với các trường hợp sử dụng khác, cũng có các nút tiêu chuẩn và nút bật/tắt.

Ví dụ về một số kiểu nút biểu tượng trong Jetpack Compose Glimmer. Những ví dụ này cho thấy 5 trạng thái của nút biểu tượng: Đã bật (1), Lấy làm tiêu điểm (2), Đã nhấn (3), Đã tắt (4), Đã tắt và lấy làm tiêu điểm (5).

Kích thước và phương diện

Phần tử Phương diện

Kích thước vùng chứa tối thiểu

48 x 48 dp

Kích thước biểu tượng nội bộ

32 x 32 dp

Khoảng đệm nội dung mặc định

GlimmerTheme.componentSpacingValues.small

Tiểu bang

Các nút biểu tượng trong Jetpack Compose Glimmer thay đổi giao diện để truyền đạt trạng thái của chúng.

  • Đã bật: Trạng thái tương tác mặc định.
  • Tập trung: Áp dụng GlimmerTheme.depthEffectLevels.level1 và đường viền nổi bật được lấy làm tiêu điểm.
  • Đã nhấn: Áp dụng lớp phủ màu trắng bán trong suốt cho bề mặt.
  • Đã tắt: Nút này không tương tác và phản hồi trực quan sẽ bị xoá.

Giá trị mặc định của nút biểu tượng

Các giá trị mặc định sau đây áp dụng cho nút biểu tượng:

  • Hình dạng: Mặc định là GlimmerTheme.shapes.large (thường là hình tròn).
  • Màu sắc: Mặc định là GlimmerTheme.colors.surface.
  • Màu nội dung: Tự động tính toán từ màu nền, trừ phi được cung cấp rõ ràng.
  • Khoảng đệm nội dung: Cung cấp khoảng cách mặc định giữa biểu tượng và cạnh vùng chứa.
  • Kích thước tối thiểu: Giá trị 48.dp cố định để ngăn các nút trở nên quá nhỏ và không thể tương tác.
  • Kích thước biểu tượng: Mặc định là GlimmerTheme.iconSizes.small (32.dp).

Ví dụ: Nút biểu tượng

Đoạn mã sau đây tạo một nút biểu tượng có các đặc điểm mặc định:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}