Phản ứng để tập trung

Mỗi khi tiêu điểm thay đổi trên cây thành phần kết hợp, Compose sẽ kích hoạt một sự kiện tiêu điểm mà đối tượng sửa đổi thành phần mẹ và thành phần con có thể quan sát. Bạn có thể sử dụng đối tượng sửa đổi onFocusChanged để theo dõi các 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.

Quan sát trạng thái tiêu điểm bằng onFocusChanged

Đối tượng sửa đổi onFocusChanged cung cấp đố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ể quan sát 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 ả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 đường viền trên các thành phần kết hợp lại và màu đường 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.

Lưu ý: Để biết các chỉ báo tiêu điểm Material 3 tiêu chuẩn (chẳng hạn như hiệu ứng gợn sóng hoặc vòng tiêu điểm), hãy xem phần Chỉ báo trạng thái tiêu điểm.

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 composable cụ thể mà modifier này được đính kèm hiện đang giữ tiêu điểm nhập dữ liệu đang hoạt động.
• hasFocus: Trả về true nếu composable này hoặc bất kỳ composable con nào của composable này hiện đang có tiêu điểm. Điều này rất hữu ích cho các vùng chứa mẹ (như thẻ hoặc thanh công cụ) cần biết khi nào 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 đang bị khoá vào phần tử (ví dụ: trong các hoạt động tương tác phụ của phương thức bằng captureFocus()). Trong khi chụp, việc cố gắng di chuyển tiêu điểm sang 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
}