Gezinme kodunuzu kapsülleyin

Grafiğinizi oluşturmak için Kotlin DSL'yi kullanırken hedefleri ve gezinme etkinliklerini yönetmek zor olabilir. Bu Özellikle de birden çok bağımsız özelliğe sahipseniz geçerlidir.

Hedefleri ayıklama

Hedeflerinizi NavGraphBuilder uzantısına taşımanız gerekiyor işlevlerine dahildir. Kendilerini tanımlayan rotalara yakın bir yerde bulunmalı ve görüntüler. Örneğin, aşağıdaki uygulama düzeyinde kodu göz önünde bulundurun kişilerin listesini gösteren bir hedef oluşturur:

// MyApp.kt

@Serializable
object Contacts

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

Gezinmeye özel kodu ayrı bir dosyaya taşımalısınız:

// ContactsNavigation.kt

@Serializable
object Contacts

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

// MyApp.kt

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

Rotalar ve hedef tanımları artık ana uygulamadan ayrı ve bunları bağımsız olarak güncelleyebilirsiniz. Ana uygulama yalnızca tek bir uygulamaya bağımlı uzantı fonksiyonu. Bu durumda, NavGraphBuilder.contactsDestination()

NavGraphBuilder uzantısı işlevi, durum bilgisiz ekran düzeyinde composable işlevi ve Navigasyon'a özgü mantık. Bu katman ayrıca eyaletin nereden geldiğini ve etkinlikleri nasıl yönettiğinizi de tanımlayın.

Örnek

Aşağıdaki snippet bir kişinin bilgilerini görüntülemek için yeni bir hedef yer alır ve mevcut kişi listesi hedefini güncelleyen navigasyon etkinliğini tıklayın.

Kendi modülüne internal ekleyebilen tipik bir ekran grubu aşağıda verilmiştir. diğer modüllerin erişimine izin verilmez:

// 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) { ... }

Hedef oluşturma

Aşağıdaki NavGraphBuilder uzantısı işlevi bir hedef oluşturur Bu resim, ContactsScreen composable'ı gösteriyor. Ayrıca, Google Analytics 4'te ekranda, ekran kullanıcı arayüzü durumunu sağlayan veViewModel iş mantığını ele aldık.

Kişi ayrıntıları hedefine gitmek gibi navigasyon etkinlikleri ViewModel tarafından ele alınmak yerine arayana gösterilen reklam sayısı.

// 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
    )
  }
}

Aynı yaklaşımı, ContactDetailsScreen Bu durumda, kullanıcı arayüzü durumunu görünüm modeli için doğrudan NavBackStackEntry üzerinden edinebilirsiniz.

// ContactsNavigation.kt

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

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

Gezinme etkinliklerini kapsülleme

Tıpkı hedefleri kapsüllediğiniz gibi ve rota türlerinin gereksiz yere açığa çıkmasını önlemek için navigasyon etkinliklerini inceleyin. Bu işlemi şu tarihe kadar yapın: NavController ürününde uzantı işlevleri oluşturuluyor.

// ContactsNavigation.kt

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

Bir araya getirin

Kişileri görüntülemek için kullanılan gezinme kodu artık gezinme grafiğidir. Uygulamanın şunları yapması gerekir:

• Hedef oluşturmak için NavGraphBuilder uzantısı işlevlerini çağırın
• NavController uzantı işlevini çağırarak bu hedefleri birbirine bağlayın rota izleme etkinlikleri için

// MyApp.kt

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

Özet

• Gezinme kodunuzu ilgili bir ekran kümesi için kapsülleyin. ayrı bir dosyada
• NavGraphBuilder üzerinde uzantı işlevleri oluşturarak hedefleri kullanıma sunun
• NavController üzerinde uzantı işlevleri oluşturarak gezinme etkinliklerini kullanıma sunun
• Ekranları ve rota türlerini gizli tutmak için internal kullanın