Phản ứng để tập trung

Cung cấp chỉ dẫn bằng hình ảnh để dễ dàng lấy tiêu điểm hơn

Mặc dù tất cả phần tử có thể làm tâm điểm trong Giao diện Material đều đã có kiểu tiêu điểm phù hợp với chủ đề, bạn có thể cần thêm một số phần tử hình ảnh để làm cho dễ nhận ra hơn. Một giải pháp hay là thay đổi đường viền của phần tử có 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 trên kết hợp lại và đường viền của phần tử được cập nhật mỗi lần phần tử 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 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.

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

   private class MyHighlightIndicationNode(private val interactionSource: InteractionSource) :
       Modifier.Node(), DrawModifierNode {
       private var isFocused = false
   
       override fun onAttach() {
           coroutineScope.launch {
               var focusCount = 0
               interactionSource.interactions.collect { interaction ->
                   when (interaction) {
                       is FocusInteraction.Focus -> focusCount++
                       is FocusInteraction.Unfocus -> focusCount--
                   }
                   val focused = focusCount > 0
                   if (isFocused != focused) {
                       isFocused = focused
                       invalidateDraw()
                   }
               }
           }
       }
   
       override fun ContentDrawScope.draw() {
           drawContent()
           if (isFocused) {
               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 làm tiêu điểm:

   object MyHighlightIndication : IndicationNodeFactory {
       override fun create(interactionSource: InteractionSource): DelegatableNode {
           return MyHighlightIndicationNode(interactionSource)
       }
   
       override fun hashCode(): Int = -1
   
       override fun equals(other: Any?) = other === this
   }
   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():

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

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

Thông thường, mỗi khi một trạng thái của tiêu điểm thay đổi, FocusEvent sẽ được kích hoạt cây này và thành phần mẹ của đối tượng sửa đổi focusable() có thể theo dõi nó bằng cách sử dụ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 kết hợp các API này bằng đối tượng sửa đổi onFocusChanged:

• isFocused trả về true nếu thành phần kết hợp đính kèm đối tượng sửa đổi được lấy tiêu đ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 hiện tại, nó sẽ kiểm tra xem phần tử hoặc một trong các trẻ em được tập trung
• isCaptured sẽ trả về true bất cứ khi nào tiêu điểm được giữ. Điều này xảy ra, đối với khi TextField chứa dữ liệu không chính xác để cố gắng tập trung các yếu 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
}