Cho biết trạng thái tiêu điểm

Trạng thái được lấy tiêu điểm cung cấp một tín hiệu trực quan rõ ràng để giúp người dùng hiểu được phần tử nào trên giao diện người dùng hiện đang giữ tâm điểm nhập. Theo mặc định, tất cả các thành phần tương tác trong Material 3 đều cung cấp chỉ báo tiêu điểm tích hợp sẵn.

Lưu ý: Hướng dẫn này trình bày cách vẽ chỉ báo tiêu điểm trực quan. Để lập trình nghe các quá trình chuyển đổi tiêu điểm, truy vấn cờ tiêu điểm (isFocused, hasFocus, isCaptured) hoặc kích hoạt các thay đổi giao diện người dùng dựa trên trạng thái, hãy xem phần Phản ứng với tiêu điểm.

Chỉ báo tiêu điểm của giao diện Material

Các thành phần Material sử dụng hàm ripple và LocalIndication để vẽ các thay đổi về trạng thái trực quan. Cách đính kèm phản hồi tiêu điểm Material tiêu chuẩn vào một thành phần tuỳ chỉnh:

1. Tạo MutableInteractionSource bằng remember { MutableInteractionSource() }.
2. Truyền nguồn tương tác vào đối tượng sửa đổi indication, cùng với ripple().

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}
FocusedState.kt

Triển khai chỉ báo lấy tiêu điểm tuỳ chỉnh

Đối với các tín hiệu trực quan tuỳ chỉnh (chẳng hạn như hiệu ứng thu phóng, đường viền hoặc toả sáng):

1. Tạo một IndicationNodeFactory.
2. Quan sát các lượt tương tác tiêu điểm do InteractionSource của phần tử phát ra.
3. Áp dụng chỉ báo tuỳ chỉnh bằng đối tượng sửa đổi indication.

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}
FocusSnippets.kt