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 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).

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 3 thành phần Thẻ. Nếu thẻ thứ nhất và thẻ thứ ba có tính tương tác (xác định một lệnh gọi lại onClick), nhưng thẻ thứ hai chỉ mang tính thông tin (không có tính năng xử lý lượt nhấp), thì khi nhấn phím Tab trên thẻ thứ nhất, tiêu điểm 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)")
}

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

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

Đối tượng sửa đổi clickable cũng biến các phần tử 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.

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

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

Đối tượng sửa đổi focusable biến một thành phần kết hợp thành mục tiêu lấy tiêu điểm mà không cần ngữ nghĩa nhấp. Người dùng có thể di chuyển tiêu điểm bàn phím đến thành phần kết hợp đã 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 hiển thị), nhưng khi nhấn phím Enter hoặc Space, thao tác nhấp sẽ không được kích hoạt:

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

Khiến thành phần kết hợp 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 chế độ điều hướng bằng bàn phím mà không cần tắt các sự kiện con trỏ hoặc sự kiện nhấp chuột. 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 }
)