Tiêu điểm 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) →

Tất cả các thành phần Jetpack Compose Glimmer đều được thiết kế để hoạt động với các phương thức nhập liệu tiêu chuẩn, chẳng hạn như thao tác nhấn hoặc vuốt trên bàn di chuột của kính AI, đồng thời cũng có khả năng tiếp nhận các lệnh nhập liệu cấp thấp dành riêng cho phần cứng kính AI. Các thành phần Jetpack Compose Glimmer sẽ tự động xử lý các sự kiện đầu vào cần thiết. Đối với các thành phần tuỳ chỉnh, bạn có thể sử dụng các API Compose hiện có như Modifier.draggable hoặc Modifier.scrollable để triển khai các hành vi tương tác cụ thể.

Trên kính AI có màn hình, thao tác nhập bằng con trỏ có thể ảnh hưởng đến tiêu điểm:

  • Nhấn: Tương tác trực tiếp để kích hoạt phần tử. Tiêu điểm sẽ di chuyển đến một phần tử khi người dùng tương tác với phần tử đó.
  • Vuốt: Dùng để di chuyển và cuộn. Các cử chỉ vuốt chưa được xử lý sẽ tự động chuyển thành các chuyển động lấy tiêu điểm, cho phép điều hướng giao diện người dùng liền mạch mà không cần nhập trực tiếp bằng con trỏ.

Chuyển động tiêu điểm và thay đổi thứ tự khi người dùng di chuyển trong ứng dụng của bạn.

Di chuyển tiêu điểm

Trên một vùng chứa có thể cuộn, tiêu điểm sẽ di chuyển liên tục khi bạn vuốt trên bàn di chuột. Đối với các phần tử riêng biệt như một hàng nút, mỗi lần vuốt sẽ di chuyển tiêu điểm một phần tử tại một thời điểm.

Thứ tự tiêu điểm

Giống như trong Jetpack Compose, Jetpack Compose Glimmer sử dụng tính năng tìm kiếm tiêu điểm một chiều. Để tìm hiểu thêm về thứ tự duyệt qua tiêu điểm, hãy xem phần Thay đổi thứ tự duyệt qua tiêu điểm.

Để thay đổi mục được lấy tiêu điểm ban đầu, bạn có thể thêm Modifier.focusGroup() cấp cao nhất và chỉ định onEnter tuỳ chỉnh focusProperty:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

Vùng chứa có thể cuộn

Để mang lại trải nghiệm người dùng tối ưu, các vùng chứa có thể di chuyển (chẳng hạn như danh sách) chỉ nên là thành phần chính duy nhất trên màn hình. Tránh đặt danh sách có thể cuộn ngay phía trên hoặc phía dưới các phần tử tương tác khác (chẳng hạn như nút) để tránh nhầm lẫn khi điều hướng và thúc đẩy chuyển động tiêu điểm mượt mà, có thể dự đoán được.

Trạng thái tiêu điểm mặc định

Jetpack Compose Glimmer triển khai các trạng thái tiêu điểm mặc định trên các thành phần có thể tương tác, bao gồm cả các thành phần bề mặt, thẻ và mục trong danh sách, giúp mang lại phản hồi trực quan nhất quán và rõ ràng trong quá trình người dùng tương tác.

Hình 1. 3 trạng thái lấy tiêu điểm trong Jetpack Compose Glimmer, được phân biệt bằng phản hồi trực quan dựa trên đường viền.

  • Mặc định: Màu nền của nút được lấy từ GlimmerTheme.colors.surface, nội dung chính của nút tính toán màu nội dung của giao diện đó và các biểu tượng là GlimmerTheme.colors.primary.

  • Được lấy tiêu điểm: Độ rộng đường viền tăng lên để cho biết tiêu điểm.

  • Được lấy tiêu điểm + Đã nhấn: Nền được đặt thành GlimmerTheme.colors.surface ở độ mờ tối đa để cho biết trạng thái đã chọn.