फ़ोकस टारगेट

फ़ोकस टारगेट, यूज़र इंटरफ़ेस (यूआई) का ऐसा एलिमेंट होता है जिस पर कीबोर्ड फ़ोकस किया जा सकता है. उपयोगकर्ता, Tab बटन या दिशा बताने वाले (ऐरो) बटन की मदद से, कीबोर्ड फ़ोकस को एक जगह से दूसरी जगह ले जा सकते हैं:

  • Tab या Shift+Tab — फ़ोकस को एक डाइमेंशन वाले विज़ुअल के क्रम में आगे या पीछे ले जाएं.
  • दिशा बताने वाली कुंजियां — फ़ोकस को दो डाइमेंशन में ले जाएं (ऊपर, नीचे, बाएं, और दाएं).

डिफ़ॉल्ट रूप से, इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) एलिमेंट फ़ोकस टारगेट होते हैं

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

उदाहरण के लिए, तीन कार्ड कॉम्पोनेंट देखें. अगर पहले और तीसरे कार्ड इंटरैक्टिव हैं (उनमें onClick कॉलबैक तय किया गया है), लेकिन दूसरा कार्ड सिर्फ़ जानकारी देने वाला है (उसमें क्लिक हैंडलिंग नहीं है), तो पहले कार्ड पर Tab कुंजी दबाने से, दूसरे कार्ड को स्किप कर दिया जाता है और सीधे तीसरे कार्ड पर पहुंच जाता है.

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}

onClick पैरामीटर का इस्तेमाल करके, दूसरे कार्ड को फ़ोकस टारगेट बनाया जा सकता है:

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}

clickable मॉडिफ़ायर, कस्टम या स्टैंडर्ड यूज़र इंटरफ़ेस (यूआई) एलिमेंट को फ़ोकस टारगेट में बदल देता है. ज़्यादा जानकारी के लिए, टैप करके दबाए रखें लेख पढ़ें.

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}

किसी कंपोज़ेबल को नॉन-क्लिकेबल फ़ोकस टारगेट बनाना

focusable मॉडिफ़ायर, कंपोज़ेबल को फ़ोकस टारगेट बनाता है. इसके लिए, क्लिक सिमैंटिक की ज़रूरत नहीं होती. उपयोगकर्ता, कीबोर्ड फ़ोकस को बदले गए कंपोज़ेबल पर ले जा सकते हैं. उदाहरण के लिए, सुलभता टूल की मदद से कॉन्टेंट की जांच करने या व्यूपोर्ट को स्क्रोल करने के लिए. हालांकि, Enter या Space बटन दबाने से क्लिक की कार्रवाई ट्रिगर नहीं होती:

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}

किसी कंपोज़ेबल को अनफ़ोकस करने लायक बनाना

कुछ मामलों में, आपको पॉइंटर या क्लिक इवेंट बंद किए बिना, कीबोर्ड नेविगेशन से किसी इंटरैक्टिव एलिमेंट को बाहर रखना पड़ सकता है. focusProperties मॉडिफ़ायर में canFocus = false सेट करके, किसी कॉम्पोनेंट को फ़ोकस पाने से रोका जा सकता है:

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)