Tập trung trong Compose

Khi tương tác với ứng dụng, người dùng thường làm như vậy bằng cách nhấn vào các thành phần trên màn hình. Tuy nhiên, đây không phải là hình thức tương tác duy nhất. Các hình thức tương tác khác có thể bao gồm:

• Người dùng ChromeOS có thể sử dụng các phím mũi tên trên bàn phím thực để thao tác trên màn hình.
• Người chơi trò chơi có thể sử dụng tay điều khiển trò chơi đi kèm để di chuyển qua trình đơn của trò chơi.
• Người dùng ứng dụng dành cho thiết bị di động có thể chuyển qua các thành phần bằng bàn phím ảo.

Trong những trường hợp như vậy, bạn cần phải theo dõi thành phần nào đang hoạt động tại bất kỳ thời điểm cụ thể nào, chúng tôi gọi đây là tâm điểm. Các phần tử trên màn hình nên được lấy làm tâm điểm theo thứ tự logic. Jetpack Compose có cách xử lý mặc định để xử lý tiêu điểm chính xác trong hầu hết các trường hợp. Tuy nhiên, trong một số trường hợp, bạn có thể cần phải sửa đổi hành vi mặc định này.

Các trang sau đây mô tả cách sử dụng tiêu điểm trong ứng dụng của bạn:

• Thay đổi thứ tự truyền tải tiêu điểm: Giải thích cách thay đổi thứ tự tiêu điểm mặc định, thêm nhóm tiêu điểm và vô hiệu hoá tiêu điểm của một thành phần kết hợp.
• Thay đổi hành vi của tiêu điểm: Mô tả cách yêu cầu, chụp và thả tiêu điểm cũng như cách chuyển hướng tiêu điểm khi vào một màn hình.
• Phản ứng tập trung: Giải thích cách phản ứng với các thay đổi về tâm điểm, thêm chỉ dẫn bằng hình ảnh cho các thành phần và hiểu trạng thái tâm điểm của một thành phần.

Thứ tự truyền tải tiêu điểm mặc định

Trước khi tìm hiểu sâu về hành vi mặc định của tính năng tìm kiếm tâm điểm, điều quan trọng là bạn phải hiểu khái niệm cấp độ trong hệ phân cấp: nói chung, có thể nói rằng 2 Composables ở cùng cấp khi chúng là anh em, nghĩa là chúng có cùng một phần tử mẹ. Ví dụ: các phần tử bên trong Column ở cùng cấp. Lên một cấp độ có nghĩa là chuyển từ một thành phần con đến thành phần mẹ Composable của mục đó, hoặc giữ lại ví dụ tương tự, từ một mục đến Column chứa mục đó. Giảm một cấp độ sẽ ngược lại, từ phần tử mẹ Column đến các mục được chứa. Bạn có thể áp dụng khái niệm này cho mọi Composable có thể chứa các Composables khác.

Lưu ý: Dịch vụ hỗ trợ tiếp cận sử dụng một cơ chế khác để quyết định thứ tự tâm điểm. Các dịch vụ này chỉ nhận được cây nút AccessibilityNodeInfo và quyết định chiến lược riêng về cách truyền tải cây này. Hãy tìm nội dung thảo luận hiện tại về chủ đề này trong công cụ theo dõi lỗi của chúng tôi.

Hoạt động điều hướng trên giao diện người dùng có thể diễn ra theo nhiều cách, một số cách mà hầu hết người dùng đã biết:

• THẺ: điều hướng một chiều, tiến hoặc lùi. Thao tác điều hướng TAB sẽ chuyển tiêu điểm đến phần tử tiếp theo hoặc phần tử trước đó trong hệ phân cấp. Theo mặc định, Compose sẽ tuân theo nội dung khai báo của Composables. Bạn có thể thực hiện thao tác điều hướng một chiều thông qua phím tab trên bàn phím hoặc mép xoay trên đồng hồ, và phương thức tìm kiếm tâm điểm này sẽ truy cập vào từng phần tử trên màn hình.
• Các phím mũi tên: điều hướng hai chiều, chuyển sang trái, phải, lên hoặc xuống. Bạn có thể điều hướng hai chiều thông qua D-Pad trên TV hoặc các phím mũi tên trên bàn phím. Thứ tự truyền tải của D-Pad chỉ truy cập các phần tử ở một cấp độ nhất định. Bạn có thể dùng nút giữa D-Pad và nút Quay lại để chuyển xuống và quay lại lên một cấp độ khác.

Hãy làm ví dụ trong ảnh chụp màn hình bên dưới, trong đó bạn có 4 nút, một nút nằm dưới nút khác và bạn muốn chuyển qua tất cả các nút theo thứ tự xuất hiện. Jetpack Compose cung cấp hành vi này ngay từ đầu: bộ công cụ này cho phép bạn di chuyển qua từng thành phần kết hợp theo thứ tự dọc từ trên xuống dưới bằng phím tab hoặc di chuyển tiêu điểm bằng cách nhấn mũi tên lên hoặc xuống.

Hình 1. Danh sách các nút hiển thị với kiểu dáng nhỏ

Khi bạn chuyển sang một loại bố cục khác, mọi thứ sẽ thay đổi một chút. Nếu bố cục có nhiều cột, như bố cục bên dưới, thì Jetpack Compose sẽ cho phép bạn di chuyển qua các cột đó mà không cần thêm mã. Nếu bạn nhấn phím tab, Jetpack Compose sẽ tự động làm nổi bật các mục theo thứ tự khai báo, từ Thứ nhất đến Thứ tư. Khi sử dụng các phím mũi tên trên bàn phím, lựa chọn sẽ đi theo hướng mong muốn trong không gian 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Composables được khai báo trong hai Rows và các phần tử tiêu điểm được khai báo theo thứ tự, từ thứ nhất đến thứ tư. Khi bạn nhấn phím tab, thao tác này sẽ tạo ra thứ tự tiêu điểm sau đây:

Hình 2. Danh sách các nút được đặt trong 2 cột cạnh nhau theo kiểu dáng lớn hơn

Trong đoạn mã dưới đây, bạn sẽ khai báo các mục trong Columns thay vì trong Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Bố cục này truyền tải các mục theo chiều dọc, từ trên xuống dưới, từ đầu màn hình đến cuối:

Hình 3. Danh sách các nút được đặt trong 2 cột cạnh nhau theo kiểu dáng lớn hơn

Hai mẫu trước, tuy khác nhau về cách điều hướng một chiều, nhưng lại mang đến trải nghiệm giống nhau khi điều hướng hai chiều. Điều này thường xảy ra do các mục trên màn hình có cùng vị trí địa lý trong cả hai ví dụ. Khi di chuyển ngay từ Column đầu tiên, tiêu điểm sẽ chuyển sang tiêu điểm thứ hai và di chuyển xuống từ Row đầu tiên sẽ di chuyển tiêu điểm sang tiêu điểm bên dưới.

Lưu ý: Thuộc tính tiêu điểm là một trường hợp đặc biệt, trong đó thành phần mẹ luôn thắng trong trường hợp xung đột hoặc trùng lặp.Đây là điều cần lưu ý khi làm việc với tiêu điểm.