फ़ोकस को पहले जैसा करें

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

स्क्रोल किए जा सकने वाले कंटेनर में फ़ोकस वापस लाना

Jetpack Compose में, स्क्रोल किए जा सकने वाले कंटेनर, जैसे कि LazyColumn, LazyRow, और LazyVerticalGrid अपने-आप फ़ोकस ग्रुप के तौर पर काम करते हैं. लेज़ी लिस्ट या ग्रिड पर फ़ोकस रीस्टोर करने की सुविधा चालू करने के लिए, focusRestorer मॉडिफ़ायर अटैच करें:

LazyColumn(
    modifier = Modifier.focusRestorer()
) {
    items(items) { item ->
        Button(onClick = { /* Handle click */ }) {
            Text(item)
        }
    }
}

जब फ़ोकस LazyColumn से हट जाता है, तो कंटेनर यह रिकॉर्ड करता है कि कौनसा आइटम चालू था. जब उपयोगकर्ता वापस सूची में जाता है, तो फ़ोकस को सूची में सबसे ऊपर से शुरू करने के बजाय, उस आइटम पर वापस ले जाया जाता है.

पंक्ति और कॉलम में फ़ोकस वापस लाना

लेज़ी लेआउट कंटेनर के उलट, स्क्रोल न किए जा सकने वाले स्टैंडर्ड लेआउट कंटेनर, जैसे कि Row और Column डिफ़ॉल्ट रूप से फ़ोकस बाउंड्री सेट नहीं करते. ये फ़ोकस एंट्री इवेंट को अपने-आप इंटरसेप्ट नहीं करते. इसलिए, सिर्फ़ focusRestorer मॉडिफ़ायर लागू करना काफ़ी नहीं है.

Row या Column पर फ़ोकस रीस्टोर करने की सुविधा चालू करने के लिए, focusGroup को focusRestorer के साथ जोड़ें:

Row(
    modifier = Modifier
        .focusGroup()
        .focusRestorer()
) {
    Button(onClick = { /* Action 1 */ }) {
        Text("First item")
    }
    Button(onClick = { /* Action 2 */ }) {
        Text("Second item")
    }
    Button(onClick = { /* Action 3 */ }) {
        Text("Third item")
    }
}

फ़ॉलबैक फ़ोकस टारगेट तय करना

जब फ़ोकस पहली बार किसी कंटेनर में जाता है, तो पहले से फ़ोकस किया गया कोई चाइल्ड मौजूद नहीं होता है. Compose, डिफ़ॉल्ट फ़ोकस ऑर्डर का पालन करता है. इससे यह तय होता है कि किस चाइल्ड को फ़ोकस करना है.

आपके पास यह तय करने का विकल्प होता है कि पहली एंट्री पर किस बच्चे को फ़ोकस किया जाए. इसके लिए, focusRestorer को फ़ॉलबैक FocusRequester पास करें. इसके अलावा, Compose के पुराने वर्शन पर focusRestorer को FocusRequester दिखाने वाला लैम्डा पास करें:

val firstItemRequester = remember { FocusRequester() }

LazyColumn(
    modifier = Modifier.focusRestorer(firstItemRequester)
) {
    itemsIndexed(items) { index, item ->
        val itemModifier = if (index == 0) {
            Modifier.focusRequester(firstItemRequester)
        } else {
            Modifier
        }
        Button(
            onClick = { /* Handle click */ },
            modifier = itemModifier
        ) {
            Text(item)
        }
    }
}

अगर किसी बच्चे पर पहले फ़ोकस नहीं किया गया है या फ़ोकस वापस लाने की सुविधा काम नहीं करती है, तो Compose, फ़ोकस को उससे जुड़े फ़ॉलबैक टारगेट पर ले जाता है.

नेविगेशन कॉम्पोनेंट, जैसे कि NavigationRail, NavigationBar, NavigationDrawer या TabRow में, उपयोगकर्ता चाहते हैं कि कॉन्टेंट वाले हिस्से से कॉम्पोनेंट में जाने पर, फ़ोकस उस डेस्टिनेशन पर हो जिसे फ़िलहाल चुना गया है.

Modifier.focusGroup() को focusProperties के साथ जोड़कर, चालू डेस्टिनेशन पर फ़ोकस किया जा सकता है. इसके लिए, onEnter प्रॉपर्टी (या Compose के पुराने वर्शन पर enter) सेट करें:

val (homeRequester, searchRequester, settingsRequester) = remember { FocusRequester.createRefs() }

val selectedRequester = when (currentDestination) {
    "home" -> homeRequester
    "search" -> searchRequester
    "settings" -> settingsRequester
    else -> homeRequester
}

NavigationRail(
    modifier = modifier
        .focusProperties {
            // Redirect focus to the selected item when focus enters the navigation rail
            onEnter = { selectedRequester.requestFocus() }
        }
        .focusGroup()
) {
    NavigationRailItem(
        selected = currentDestination == "home",
        onClick = { onNavigate("home") },
        icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
        label = { Text("Home") },
        modifier = Modifier.focusRequester(homeRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "search",
        onClick = { onNavigate("search") },
        icon = { Icon(Icons.Default.Search, contentDescription = "Search") },
        label = { Text("Search") },
        modifier = Modifier.focusRequester(searchRequester)
    )
    NavigationRailItem(
        selected = currentDestination == "settings",
        onClick = { onNavigate("settings") },
        icon = { Icon(Icons.Default.Settings, contentDescription = "Settings") },
        label = { Text("Settings") },
        modifier = Modifier.focusRequester(settingsRequester)
    )
}

स्क्रीन ट्रांज़िशन के दौरान फ़ोकस वापस लाना

जब कोई उपयोगकर्ता, जानकारी वाली स्क्रीन पर जाने के लिए किसी आइटम पर क्लिक करता है और इसके बाद, 'वापस जाएं' बटन या जेस्चर का इस्तेमाल करके वापस आता है, तो उस आइटम पर फ़ोकस वापस लाया जा सकता है जिस पर उसने क्लिक किया था.

स्क्रीन ट्रांज़िशन के दौरान फ़ोकस को बनाए रखने और उसे वापस लाने के लिए:

  1. कंटेनर को FocusRequester से जोड़ें.
  2. नेविगेशन इवेंट को ट्रिगर करने से पहले, कंटेनर के FocusRequester पर saveFocusedChild() को कॉल करें.
  3. जब उपयोगकर्ता वापस स्क्रीन पर जाता है, तो कंटेनर पर शुरुआती फ़ोकस का अनुरोध करें या restoreFocusedChild() को कॉल करें.
पीछे जाएं
ग्रुप फ़ोकस टारगेट
आगे बढ़ें
फ़ोकस की स्थिति के बारे में बताना