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

Trạng thái được làm nổi bật cung cấp một gợi ý trực quan rõ ràng để giúp người dùng hiểu được phần tử giao diện người dùng nào hiện đang giữ tiêu điểm nhập. Theo mặc định, tất cả thành phần Material 3 tương tác đề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. Để nghe các chuyển đổi tiêu điểm theo phương thức lập trình, truy vấn cờ tiêu điểm (isFocused, hasFocus, isCaptured) hoặc kích hoạt các thay đổi về 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 tính năng tuỳ chỉnh 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 hình ảnh. Cách đính kèm phản hồi tiêu điểm Material 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 đến đố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 tiêu điểm tuỳ chỉnh

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

1. Tạo IndicationNodeFactory.
2. Quan sát các lượt tương tác lấy 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