封装导航代码

使用 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 扩展函数会创建一个显示 ConversationScreen 可组合项的目的地。此外，它现在还会将屏幕与 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 确保屏幕和路由类型的私密性