फ़ोकस करने के लिए प्रतिक्रिया दें

आसानी से फ़ोकस करने के लिए विज़ुअल संकेत दें

मटीरियल थीम के सभी फ़ोकस करने लायक एलिमेंट पर पहले से ही फ़ोकस स्टाइल मौजूद है जो थीम से मेल खाते हैं, आपको कस्टम बनाने के लिए कुछ विज़ुअल एलिमेंट जोड़ने पड़ सकते हैं फ़ोकस किए गए एलिमेंट को पहचानना आसान होता है. एक अच्छा समाधान यह है कि आप अपने समाचार खाते का बॉर्डर आपका एलिमेंट जिसका रंग बैकग्राउंड के साथ अच्छा कंट्रास्ट हो:

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

इस उदाहरण में, remember का इस्तेमाल बॉर्डर के रंग को सेव करने के लिए किया जाता है रीकंपोज़िशन और हर बार एलिमेंट के आउटलाइन को अपडेट कर दिया जाता है. फ़ोकस बदल जाता है या खो जाता है.

बेहतर विज़ुअल क्यू लागू करना

Jetpack Compose की मदद से, बेहतर और ऐडवांस विज़ुअल भी बनाया जा सकता है ऐसे क्यू जो आपके यूज़र इंटरफ़ेस (यूआई) के साथ बेहतर तरीके से मेल खाते हैं.

1. सबसे पहले, एक ऐसा IndicationInstance बनाएं जो आपके यूज़र इंटरफ़ेस में आपकी पसंद के मुताबिक ड्रॉ करता हो:

   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. इसके बाद, एक Indication बनाएं और फ़ोकस की गई स्थिति याद रखें:

   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. indication() मॉडिफ़ायर की मदद से, यूज़र इंटरफ़ेस (यूआई) में Indication और InteractionSource, दोनों जोड़ें:

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

फ़ोकस की स्थिति को समझना

आम तौर पर, जब भी फ़ोकस की स्थिति बदलती है, तब FocusEvent ट्रिगर होता है पेड़ और एक focusable() संशोधक के अभिभावक इसे सुन सकते हैं onFocusChanged() मॉडिफ़ायर.

अगर आपको फ़ोकस की स्थिति के बारे में जानना है,तो इन एपीआई को एक साथ इस्तेमाल किया जा सकता है onFocusChanged मॉडिफ़ायर का इस्तेमाल करके:

• अगर वह कंपोज़ेबल, जिससे मॉडिफ़ायर जुड़ा है, तो isFocused true वैल्यू दिखाता है फ़ोकस्ड है
• hasFocus, isFocused की तरह ही काम करता है. हालांकि, यह काफ़ी अलग होता है: केवल वर्तमान की जांच करने के बजाय, यह जांच करता है कि बच्चों पर फ़ोकस होता है
• फ़ोकस को होल्ड पर रखने पर isCaptured, true दिखाता है. ऐसा होता है, उदाहरण के लिए, जब किसी TextField में गलत डेटा हो, जिससे फ़ोकस करने की कोशिश की जा रही हो अन्य एलिमेंट फ़ोकस को साफ़ नहीं कर पाएंगे.

ये फ़ील्ड नीचे दिखाए गए हैं:

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