封装导航代码

当使用 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可组合的目的地。此外，它现在将屏幕与提供屏幕 UI 状态和处理屏幕相关业务逻辑的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获取 UI 状态，而不是从视图模型获取。

// 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来保持屏幕和路由类型私有