फ़ोकस टारगेट

फ़ोकस टारगेट, यूज़र इंटरफ़ेस (यूआई) का एक ऐसा एलिमेंट होता है जिस पर कीबोर्ड फ़ोकस को ले जाया जा सकता है. उपयोगकर्ता, 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 }
)

पीछे जाएं
खास जानकारी
आगे बढ़ें
फ़ोकस ट्रैवर्सल ऑर्डर