Focus traversal order (Thứ tự duyệt qua tiêu điểm)

Người dùng có thể di chuyển tiêu điểm bàn phím trên các phần tử giao diện người dùng bằng phím Tab hoặc các phím định hướng (mũi tên / D-pad):

• Tab / Shift+Tab: Di chuyển tiêu điểm về phía trước hoặc phía sau theo thứ tự xuất hiện một chiều.
• Phím định hướng: Di chuyển tiêu điểm theo hai chiều (Lên, Xuống, Trái và Phải).

Duyệt qua tiêu điểm theo một chiều

Trong quá trình duyệt qua tiêu điểm theo một chiều, phím Tab sẽ chuyển tiêu điểm qua giao diện người dùng dựa trên thứ tự xuất hiện trực quan trên màn hình.

Ví dụ: khi 4 nút được sắp xếp theo hàng:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}
FocusTraversal.kt

Khi nhấn phím Tab, tiêu điểm sẽ di chuyển tuần tự qua các nút theo thứ tự sau:

1. Nút thứ nhất (trên cùng bên trái)
2. Nút thứ 2 (đầu trên)
3. Nút thứ 3 (dưới cùng bên trái)
4. Nút thứ 4 (dưới cùng)

Khi nhấn phím Tab trên phần tử cuối cùng, tiêu điểm sẽ quay lại mục tiêu lấy tiêu điểm đầu tiên. Khi nhấn tổ hợp phím Shift+Tab, tiêu điểm sẽ di chuyển theo thứ tự ngược lại.

Duyệt qua tiêu điểm theo hai chiều

Thao tác nhấn phím định hướng trên bàn phím hoặc dùng D-pad sẽ kích hoạt quá trình duyệt qua tiêu điểm theo hai chiều.

Trong quá trình duyệt qua theo hai chiều, hệ thống sẽ kiểm tra toạ độ hình học và ranh giới không gian của các phần tử trên giao diện người dùng để xác định mục tiêu gần nhất theo hướng được yêu cầu.

Quá trình duyệt qua tiêu điểm theo hai chiều không quay vòng. Nếu người dùng nhấn phím Xuống trong khi tiêu điểm nằm trên phần tử dưới cùng, thì tiêu điểm vẫn nằm trên phần tử đó thay vì chuyển đến đầu màn hình.

Đặt lại chế độ di chuyển tiêu điểm bằng các lượt nhấp con trỏ

Khi chuyển đổi giữa bàn phím thực và chuột hoặc bàn di chuột trên máy tính hoặc thiết bị màn hình lớn:

• Xoá tiêu điểm khi nhấn hoặc nhấp: Thao tác nhấp hoặc nhấn vào khoảng trống không tương tác bằng chuột hoặc bàn di chuột sẽ giải phóng tiêu điểm khỏi phần tử đang hoạt động.
• Khởi động lại quá trình di chuyển: Sau khi tiêu điểm bị xoá, lần nhấn phím Tab tiếp theo sẽ khởi động lại quá trình di chuyển một chiều tại mục tiêu lấy tiêu điểm đầu tiên theo thứ tự xuất hiện trực quan, thay vì tiếp tục từ phần tử đang hoạt động trước đó. Điều này cũng tương tự như quá trình duyệt qua tiêu điểm theo hai chiều. Các phím định hướng sẽ di chuyển tiêu điểm bàn phím đến mục tiêu lấy tiêu điểm gần nhất theo hướng được yêu cầu.

Để biết thông tin chi tiết về cách xoá tiêu điểm theo phương thức lập trình, hãy xem phần Di chuyển và xoá tiêu điểm.

Tuỳ chỉnh thứ tự duyệt qua tiêu điểm

Bạn có thể tuỳ chỉnh hành vi duyệt qua bằng đối tượng sửa đổi focusProperties.

Tuỳ chỉnh thứ tự duyệt qua một chiều

Để ghi đè quá trình di chuyển một chiều, hãy chỉ định thuộc tính next hoặc previous bằng FocusRequester:

1. Tạo một đối tượng FocusRequester bằng remember { FocusRequester() }.
2. Gắn FocusRequester vào thành phần kết hợp đích bằng đối tượng sửa đổi focusRequester.
3. Áp dụng đối tượng sửa đổi focusProperties cho thành phần có thể kết hợp nguồn và chỉ định FocusRequester cho next (đối với Tab) hoặc previous (đối với Shift+Tab).

val (first, second, third) = remember { FocusRequester.createRefs() }

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}
FocusTraversal.kt

Tuỳ chỉnh thứ tự duyệt qua hai chiều

Tương tự, bạn có thể ghi đè thao tác di chuyển tiêu điểm hai chiều bằng cách chỉ định các thực thể FocusRequester cho up, down, start, end, left hoặc right trong focusProperties:

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}
FocusTraversal.kt

Để chặn thao tác điều hướng bằng tiêu điểm theo một hướng cụ thể (ví dụ: tại ranh giới bố cục), hãy chỉ định FocusRequester.Cancel cho thuộc tính đó (ví dụ: down = FocusRequester.Cancel). Để giữ lại rõ ràng thuật toán di chuyển mặc định của hệ thống cho một hướng nhất định, hãy chỉ định FocusRequester.Default.