अपने नेविगेशन कोड को इनकैप्सुलेट करें

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

डेस्टिनेशन एक्सट्रैक्ट करना

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

// MyApp.kt

@Serializable
object Contacts

@Composable
fun MyApp() {
  ...
  NavHost(navController, startDestination = Contacts) {
    composable<Contacts> { ContactsScreen( /* ... */ ) }
  }
}

आपको नेविगेशन के लिए बने कोड को किसी दूसरी फ़ाइल में ले जाना चाहिए:

// ContactsNavigation.kt

@Serializable
object Contacts

fun NavGraphBuilder.contactsDestination() {
    composable<Contacts> { ContactsScreen( /* ... */ ) }
}

// MyApp.kt

@Composable
fun MyApp() {
  ...
  NavHost(navController, startDestination = Contacts) {
     contactsDestination()
  }
}

रास्तों और डेस्टिनेशन की परिभाषाएं अब मुख्य ऐप्लिकेशन से अलग हैं और तो उन्हें अलग-अलग अपडेट किया जा सकता है. मुख्य ऐप्लिकेशन सिर्फ़ एक एक्सटेंशन फ़ंक्शन का इस्तेमाल करना चाहिए. इस मामले में, वह NavGraphBuilder.contactsDestination().

NavGraphBuilder एक्सटेंशन फ़ंक्शन, स्टेटलेस के बीच पुल बनाता है स्क्रीन-लेवल कंपोज़ेबल फ़ंक्शन और नेविगेशन के लिए खास लॉजिक. यह लेयर ये काम कर सकती है: यह भी तय करें कि राज्य का सोर्स क्या है और इवेंट कैसे मैनेज किए जाते हैं.

उदाहरण

नीचे दिया गया स्निपेट, संपर्क की जानकारी दिखाने के लिए एक नए डेस्टिनेशन की जानकारी देता है के बारे में जानकारी देता है और संपर्क सूची के मौजूदा डेस्टिनेशन को अपडेट करता है, ताकि नेविगेशन इवेंट का इस्तेमाल करें.

यहां स्क्रीन का एक खास सेट दिया गया है, जिसे अपने मॉड्यूल के लिए internal किया जा सकता है, इसलिए अन्य मॉड्यूल उन्हें ऐक्सेस नहीं कर सकते:

// ContactScreens.kt

// Displays a list of contacts
@Composable
internal fun ContactsScreen(
  uiState: ContactsUiState,
  onNavigateToContactDetails: (contactId: String) -> Unit
) { ... }

// Displays the details for an individual contact
@Composable
internal fun ContactDetailsScreen(contact: ContactDetails) { ... }

डेस्टिनेशन बनाएं

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

नेविगेशन इवेंट, जैसे कि संपर्क की जानकारी वाले डेस्टिनेशन पर नेविगेट करना ViewModel के ज़रिए कॉल करने के बजाय, कॉल करने वाले (कॉलर) को दिखाए जाते हैं.

// ContactsNavigation.kt

@Serializable
object Contacts

// Adds contacts destination to `this` NavGraphBuilder
fun NavGraphBuilder.contactsDestination(
  // Navigation events are exposed to the caller to be handled at a higher level
  onNavigateToContactDetails: (contactId: String) -> Unit
) {
  composable<Contacts> {
    // The ViewModel as a screen level state holder produces the screen
    // UI state and handles business logic for the ConversationScreen
    val viewModel: ContactsViewModel = hiltViewModel()
    val uiState = viewModel.uiState.collectAsStateWithLifecycle()
    ContactsScreen(
      uiState,
      onNavigateToContactDetails
    )
  }
}

इसी तरीके का इस्तेमाल, ऐसा डेस्टिनेशन बनाने के लिए किया जा सकता है जो ContactDetailsScreen. इस मामले में, किसी व्यू मॉडल के हिसाब से, तो यह डेटा सीधे NavBackStackEntry से भी ऐक्सेस किया जा सकता है.

// ContactsNavigation.kt

@Serializable
internal data class ContactDetails(val id: String)

fun NavGraphBuilder.contactDetailsScreen() {
  composable<ContactDetails> { navBackStackEntry ->
    ContactDetailsScreen(contact = navBackStackEntry.toRoute())
  }
}

नेविगेशन इवेंट इनकैप्सुलेट करें

जिस तरह डेस्टिनेशन को एनकैप्सुलेट करते हैं उसी तरह एनकैप्सुलेट भी किया जा सकता है नेविगेशन इवेंट का इस्तेमाल करें. इस तरीके से करें NavController पर एक्सटेंशन फ़ंक्शन बनाकर.

// ContactsNavigation.kt

fun NavController.navigateToContactDetails(id: String) {
  navigate(route = ContactDetails(id = id))
}

सभी को साथ लाएं

संपर्कों को दिखाने के लिए नेविगेशन कोड को अब ऐप्लिकेशन का नेविगेशन ग्राफ़. ऐप्लिकेशन के लिए ज़रूरी है कि:

• गंतव्य बनाने के लिए NavGraphBuilder एक्सटेंशन फ़ंक्शन को कॉल करें
• NavController एक्सटेंशन फ़ंक्शन को कॉल करके उन डेस्टिनेशन को कनेक्ट करें नेविगेशन इवेंट के लिए

// MyApp.kt

@Composable
fun MyApp() {
  ...
  NavHost(navController, startDestination = Contacts) {
     contactsDestination(onNavigateToContactDetails = { contactId ->
        navController.navigateToContactDetails(id = contactId)
     })
     contactDetailsDestination()
  }
}

खास जानकारी में

• अपने नेविगेशन कोड को रखकर, उसे मिलती-जुलती स्क्रीन के सेट के लिए इनकैप्सुलेट करें किसी अलग फ़ाइल में
• NavGraphBuilder पर एक्सटेंशन फ़ंक्शन बनाकर डेस्टिनेशन दिखाएं
• NavController पर एक्सटेंशन फ़ंक्शन बनाकर नेविगेशन इवेंट दिखाएं
• स्क्रीन और रास्ते के टाइप निजी बनाए रखने के लिए, internal का इस्तेमाल करें