Các nút 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 →

Tìm hiểu về các loại thiết bị XR →

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 bề mặt Jetpack Compose Glimmer. Hệ thống này 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.

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.

Tiểu bang

Các nút trong Jetpack Compose Glimmer sẽ 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.level1 và đườ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 và biểu tượng

Nút cơ bản chỉ bao gồm nhãn văn bản, nhưng 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 ngữ cảnh.

Đoạn mã sau đây tạo một nút có cả biểu tượng đầu và biểu tượng cuối:

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

Nhóm nút

Thành phần kết hợp ButtonGroup cho phép bạn nhóm các nút thành một hàng có thể di chuyển đóng vai trò là bộ điều khiển tiêu điểm. Khi người dùng cuộn, tiêu điểm sẽ tự động di chuyển để làm nổi bật nút tương ứng với vị trí cuộn hiện tại.

Ví dụ: Nhóm nút

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

Kiểm soát tiêu điểm trong nhóm nút

Bạn có thể di chuyển tiêu điểm đến bất kỳ nút nào trong một nhóm để kiểm soát lựa chọn theo cách thủ công.

Tuỳ chỉnh và kiểm soát hành vi cuộn bằng trạng thái ButtonGroup:

1. Khai báo trạng thái bằng rememberButtonGroupState.
2. Truyền giá trị này đến thành phần kết hợp ButtonGroup.
3. Gọi animateScrollToItem (hoặc scrollToItem để cuộn nhanh) để cuộn đến một mục cụ thể và tự động di chuyển tiêu điểm đến mục đó.

Đoạn mã sau đây di chuyển tiêu điểm từ nút này sang nút khác khi người dùng nhấp vào:

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt