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

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

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

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 के पुराने वर्शन पर 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() को कॉल करें.
पीछे जाएं
ग्रुप फ़ोकस टारगेट
आगे बढ़ें
फ़ोकस की स्थिति के बारे में बताना