Phản ứng để tập trung

Mỗi khi tiêu điểm thay đổi trên cây thành phần, Compose sẽ kích hoạt một sự kiện tiêu điểm mà đối tượng sửa đổi mẹ và con có thể quan sát. Bạn có thể dùng đối tượng sửa đổi onFocusChanged để theo dõi các quá trình chuyển đổi trạng thái tiêu điểm, truy vấn các thuộc tính tiêu điểm hiện tại và kích hoạt các bản cập nhật giao diện người dùng dựa trên trạng thái.

Theo dõi trạng thái tiêu điểm bằng onFocusChanged

Đối tượng sửa đổi onFocusChanged cung cấp một đối tượng FocusState bất cứ khi nào một phần tử nhận hoặc mất tiêu điểm.

Ví dụ: bạn có thể theo dõi các thay đổi về tiêu điểm để cập nhật trạng thái thành phần tuỳ chỉnh (chẳng hạn như thay đổi màu đường viền của một phần tử hoặc kích hoạt một ảnh động):

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

Trong ví dụ này, remember lưu trữ màu viền trong các thành phần kết hợp lại và màu viền sẽ cập nhật bất cứ khi nào trạng thái tiêu điểm của phần tử chuyển đổi.

Thuộc tính FocusState

Đối tượng FocusState được truyền đến onFocusChanged cung cấp 3 thuộc tính chính:

• isFocused: Trả về true nếu thành phần kết hợp cụ thể mà đối tượng sửa đổi này được đính kèm hiện đang giữ tiêu điểm đầu vào đang hoạt động.
• hasFocus: Trả về true nếu thành phần kết hợp này hoặc bất kỳ thành phần kết hợp con nào của thành phần kết hợp này hiện có tiêu điểm. Điều này hữu ích cho các vùng chứa mẹ (chẳng hạn như thẻ hoặc thanh công cụ) cần biết thời điểm có bất kỳ thành phần con nào trong đó đang hoạt động.
• isCaptured: Trả về true nếu tiêu điểm hiện bị khoá vào phần tử (ví dụ: trong các hoạt động phụ phương thức bằng captureFocus()). Trong khi được ghi lại, việc cố gắng di chuyển tiêu điểm đến các phần tử khác sẽ không xoá tiêu điểm.

Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}