Mục tiêu lấy tiêu điểm

Mục tiêu lấy tiêu điểm là một phần tử trên giao diện người dùng mà tiêu điểm bàn phím có thể di chuyển đến. Người dùng có thể di chuyển tiêu điểm bàn phím bằng phím Tab hoặc các phím định hướng (mũi tên):

• Tab hoặc Shift+Tab — Di chuyển tiêu điểm tiến hoặc lùi 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).

Theo mặc định, các phần thử tương tác trên giao diện người dùng là mục tiêu lấy tiêu điểm

Theo mặc định, thành phần tương tác là mục tiêu lấy tiêu điểm. Nói cách khác, một phần tử trên giao diện người dùng là mục tiêu lấy tiêu điểm nếu người dùng có thể nhấn hoặc nhấp vào phần tử đó.

Ví dụ: hãy xem xét ba thành phần Card (Thẻ). Nếu thẻ thứ nhất và thứ ba có tính tương tác (chúng xác định lệnh gọi lại onClick), nhưng thẻ thứ hai chỉ mang tính thông tin (không có thao tác xử lý lượt nhấp), thì việc nhấn phím Tab trên thẻ thứ nhất sẽ bỏ qua thẻ thứ hai và chuyển thẳng đến thẻ thứ ba.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}
FocusTarget.kt

Bạn có thể đặt thẻ nội dung thứ hai làm mục tiêu lấy tiêu điểm bằng cách cung cấp tham số onClick:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}
FocusTarget.kt

Đối tượng sửa đổi clickable cũng biến các phần tử trên giao diện người dùng tuỳ chỉnh hoặc tiêu chuẩn thành mục tiêu lấy tiêu điểm. Hãy tham khảo phần Nhấn và giữ để biết thông tin chi tiết.

Cảnh báo: Đừng sử dụng đồng thời đối tượng sửa đổi focusable và đối tượng sửa đổi clickable. Điều này dẫn đến hành vi không chính xác vì tạo ra hai mục tiêu lấy tiêu điểm độc lập.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}
FocusTarget.kt

Đặt một thành phần kết hợp làm mục tiêu lấy tiêu điểm không nhấp được

Đối tượng sửa đổi focusable giúp một composable trở thành mục tiêu lấy tiêu điểm mà không cần ngữ nghĩa nhấp chuột. Người dùng có thể di chuyển tiêu điểm bàn phím đến composable đã sửa đổi (ví dụ: để kiểm tra nội dung bằng các công cụ hỗ trợ tiếp cận hoặc cuộn khung nhìn), nhưng việc nhấn phím Enter hoặc Space không kích hoạt hành động nhấp:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}
FocusTarget.kt

Làm cho một composable không thể lấy tiêu điểm

Trong một số trường hợp, bạn có thể muốn loại trừ một thành phần tương tác khỏi thao tác điều hướng bằng bàn phím mà không tắt sự kiện nhấp chuột hoặc con trỏ. Bạn có thể ngăn một thành phần nhận tiêu điểm bằng cách đặt canFocus = false bên trong đối tượng sửa đổi focusProperties:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)
FocusSnippets.kt