Trong Jetpack Compose Glimmer, Button là một thành phần tương tác được tối ưu hoá cho dữ liệu đầu vào của kính hiển thị, mang đến phản hồi trực quan rõ ràng thông qua các trạng thái của thành phần này để hướng dẫn hành động của người dùng.
Các nút được tạo dựa trên hệ thống nền tảng Jetpack Compose Glimmer, tự động xử lý các thuộc tính vật lý như đường viền và độ sâu.
Nút chuẩn chứa một nhãn văn bản và các biểu tượng không bắt buộc. Bạn có thể dùng nút này cho các hành động chính hoặc phụ. Ngoài ra, còn có các nút chuyên dụng, chẳng hạn như nút biểu tượng và nút bật/tắt. Các nút này được xác định là các thành phần riêng biệt trong Jetpack Compose Glimmer.
Mặc định
Lớn
Phân tích
Nút bao gồm một vùng chứa và một nhãn, có biểu tượng đầu và cuối không bắt buộc.
| Phần | Mô tả |
|---|---|
Vùng chứa |
Bề mặt nền của nút. |
Nhãn |
Văn bản mô tả hành động. |
Biểu tượng (không bắt buộc) |
Chỉ báo dạng hình ảnh ở đầu hoặc cuối. |
Kích thước
Các nút Glimmer của Jetpack Compose hỗ trợ 2 biến thể kích thước. Những yếu tố này ảnh hưởng đến chiều cao tối thiểu và khoảng đệm bên trong.
| Kích thước | Chiều cao tối thiểu | Sử dụng mặc định |
|---|---|---|
Trung bình |
48.dp |
Các hành động và danh sách tiêu chuẩn (mặc định). |
Lớn |
72.dp |
Các thao tác nhấn mạnh hoặc điểm truy cập chính vào màn hình. |
Tiểu bang
Các nút 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 mặc định của một nút tương tác.
- Lấy tiêu điểm: Khi lấy tiêu điểm, nút sẽ áp dụng
GlimmerTheme.depthEffectLevels.level1và đường viền nổi bật khi lấy tiêu điểm. - Đã nhấn: Khi được kích hoạt, một lớp phủ màu trắng bán trong suốt sẽ được áp dụng cho bề mặt.
- Đã tắt: Nút không phản hồi thông tin đầu vào và giao diện trực quan của nút sẽ được điều chỉnh.
Giá trị mặc định của nút
Các giá trị mặc định sau đây áp dụng cho các nút tiêu chuẩn:
- Theo mặc định, các nút sẽ sử dụng
GlimmerTheme.typography.bodySmall. Đảm bảo văn bản trong các nút ngắn gọn và mô tả rõ ràng hành động. - Hình dạng mặc định của nút là
GlimmerTheme.shapes.large. Việc làm tròn nhất quán này giúp người dùng xác định các nút trên giao diện kính hiển thị.
Ví dụ: Nút có văn bản
Đoạn mã sau đây tạo một nút tiêu chuẩn có văn bản:
@Composable fun ButtonSample() { Button(onClick = {}) { Text("Send") } }
Ví dụ: Nút có biểu tượng ở đầu và cuối
Bạn cũng có thể thêm biểu tượng vào đầu (bằng cách sử dụng leadingIcon) hoặc cuối (bằng cách sử dụng trailingIcon) văn bản để cung cấp thêm bối cảnh.
Đoạn mã sau đây tạo một nút có biểu tượng ở đầu:
@Composable fun ButtonWithLeadingIconSample() { Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) { Text("Send") } }