Tập trung trong Compose

Khi tương tác với ứng dụng của bạn, người dùng thường chạm vào các phần tử 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. Sau đây là một số hình thức tương tác khác:

• 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 để di chuyển trên màn hình.
• Người chơi trò chơi có thể dùng tay điều khiển trò chơi đã kết nối để di chuyển trong trình đơn của trò chơi.
• Người dùng ứng dụng di động có thể chuyển đổi qua các phần tử bằng bàn phím ảo.

Trong những trường hợp này, điều quan trọng là phải theo dõi thành phần nào đang hoạt động tại một thời điểm bất kỳ, đó là điều mà chúng ta gọi là tiêu điểm. Các phần tử trên màn hình phải được lấy tiêu điểm theo một thứ tự hợp lý. Jetpack Compose có một cách mặc định để xử lý tiêu điểm, cách này phù hợp 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 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 qua 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à tắt tiêu điểm của một thành phần kết hợp.
• Thay đổi hành vi lấy tiêu điểm: Mô tả cách yêu cầu, nắm bắt và giải phóng 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 với tiêu điểm: Giải thích cách phản ứng với các thay đổi về tiêu điểm, thêm tín hiệu trực quan vào các phần tử và tìm hiểu trạng thái tiêu điểm của một phần tử.

Thứ tự duyệt qua tiêu điểm mặc định

Trước khi đi sâu vào hành vi mặc định của tính năng tìm kiếm tiêu điểm, bạn cần hiểu khái niệm về cấp trong hệ phân cấp: nói chung, chúng ta có thể nói rằng hai Composables ở cùng cấp khi chúng là anh chị em, tức là chúng có cùng cha mẹ. Ví dụ: các phần tử bên trong một 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 sang thành phần mẹ Composable, hoặc giữ nguyên ví dụ, quay lại từ một mục đến một Column chứa mục đó. Đi xuống một cấp là cách khác, 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 Composables khác.

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

• TAB: thao tác điều hướng một chiều, đi tiến hoặc lùi. Thao tác điều hướng bằng phím 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 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 Vòng xoay trên đồng hồ. Loại tìm kiếm tiêu điểm này sẽ truy cập vào từng phần tử trên màn hình.
• Phím mũi tên: điều hướng hai chiều, di 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, đồng thời thứ tự di chuyển của thao tác này chỉ truy cập vào các phần tử ở một cấp độ nhất định. Bạn có thể dùng nút trung tâm của D-Pad và nút Quay lại để đi xuống và quay lại một cấp độ khác.

Hãy lấy ảnh chụp màn hình dưới đây làm ví dụ. Trong ảnh này, bạn có 4 nút, nút này nằm dưới nút kia và bạn muốn chuyển đổi qua tất cả các nút theo thứ tự xuất hiện. Jetpack Compose cung cấp sẵn hành vi này: bộ công cụ cho phép bạn 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 cách sử dụng phím tab hoặc di chuyển tiêu điểm bằng cách nhấn phím mũi tên lên hoặc xuống.

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ủa bạn có nhiều cột, chẳng hạn như bố cục bên dưới, thì Jetpack Compose cho phép bạn di chuyển qua các cột đó mà không cần thêm bất kỳ mã nào. 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ừ Mục đầu tiên đến Mục thứ tư. Khi bạn 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 2 Rows và các phần tử tiêu điểm được khai báo theo thứ tự, từ phần tử đầu tiên đến phần tử 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:

Trong đoạn mã dưới đây, bạn 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 di chuyển 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 màn hình:

Hai mẫu trước đó, mặc dù khác nhau về thao tác một chiều, nhưng mang lại trải nghiệm giống nhau khi nói đến thao tác hai chiều. Điều này thường là 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 tiêu điểm sang phải từ Column đầu tiên, tiêu điểm sẽ chuyển sang Column thứ hai. Khi di chuyển tiêu điểm xuống từ Row đầu tiên, tiêu điểm sẽ chuyển sang Row bên dưới.