封装您的导航代码

当使用 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 提供屏幕 UI 状态并处理屏幕相关的业务逻辑。

导航事件（例如导航到联系人详情目标）会公开给调用方，而不是由 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 来保持屏幕和路由类型私有