Phản ứng để tập trung

Đưa ra các chỉ dẫn bằng hình ảnh để dễ dàng tập trung hơn

Mặc dù tất cả các phần tử có thể làm tâm điểm trong Giao diện Material đều có kiểu tâm điểm phù hợp với giao diện, nhưng bạn có thể cần thêm một số phần tử hình ảnh để giúp phần tử được lấy tiêu điểm dễ nhận ra hơn. Bạn nên thay đổi đường viền của phần tử bằng màu có độ tương phản tốt với nền:

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 được dùng để lưu trữ màu của đường viền trong các thành phần kết hợp lại và đường viền của phần tử được cập nhật mỗi khi phần tử này tăng hoặc mất tiêu điểm.

Triển khai chỉ dẫn bằng hình ảnh nâng cao

Với Jetpack Compose, bạn cũng có thể tạo các chỉ dẫn hình ảnh tinh vi và nâng cao hơn phù hợp hơn với giao diện người dùng của mình.

1. Trước tiên, hãy tạo một IndicationInstance vẽ trực quan điểm gợi ý bạn muốn trong giao diện người dùng:

   private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) :
       IndicationInstance {
       private val isEnabled by isEnabledState
       override fun ContentDrawScope.drawIndication() {
           drawContent()
           if (isEnabled) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Tiếp theo, hãy tạo một Indication và ghi nhớ trạng thái được lấy làm tâm điểm:

   class MyHighlightIndication : Indication {
       @Composable
       override fun rememberUpdatedInstance(interactionSource: InteractionSource):
           IndicationInstance {
           val isFocusedState = interactionSource.collectIsFocusedAsState()
           return remember(interactionSource) {
               MyHighlightIndicationInstance(isEnabledState = isFocusedState)
           }
       }
   }
   FocusSnippets.kt

3. Thêm cả Indication và InteractionSource vào giao diện người dùng thông qua đối tượng sửa đổi indication():

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   FocusSnippets.kt

Nắm rõ trạng thái của tiêu điểm

Nhìn chung, mỗi khi trạng thái của tiêu điểm thay đổi, FocusEvent sẽ được kích hoạt cây và phần tử mẹ của đối tượng sửa đổi focusable() có thể theo dõi bằng đối tượng sửa đổi onFocusChanged().

Nếu cần biết trạng thái của tiêu điểm,bạn có thể sử dụng các API này cùng với đối tượng sửa đổi onFocusChanged:

• isFocused trả về true nếu thành phần kết hợp mà đối tượng sửa đổi đính kèm được lấy làm tâm điểm
• hasFocus hoạt động tương tự như isFocused, nhưng có một điểm khác biệt đáng kể: thay vì chỉ kiểm tra dòng điện, tính năng này sẽ kiểm tra xem phần tử hoặc một trong các phần tử con của nó có được lấy làm tâm điểm hay không
• isCaptured trả về true bất cứ khi nào tiêu điểm được giữ. Ví dụ: điều này xảy ra khi TextField chứa dữ liệu không chính xác, vì vậy việc cố gắng lấy tiêu điểm các phần tử khác sẽ không xoá tiêu điểm.

Các trường này được hiển thị dưới đây:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}