ห่อหุ้มรหัสการนำทาง

เมื่อใช้ 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 จะสร้างบริดจ์ระหว่างสถานะแบบไม่เก็บสถานะ ฟังก์ชัน Composable ระดับหน้าจอและตรรกะเฉพาะการนำทาง เลเยอร์นี้สามารถ จะระบุที่มาของรัฐและวิธีที่คุณจัดการกับเหตุการณ์ด้วย

ตัวอย่าง

ข้อมูลโค้ดต่อไปนี้จะแนะนำปลายทางใหม่เพื่อแสดงข้อมูลติดต่อ รายละเอียด และอัปเดตปลายทางรายการที่อยู่ติดต่อที่มีอยู่ให้ แสดง เหตุการณ์การนำทางเพื่อแสดงรายละเอียดของรายชื่อติดต่อ

ต่อไปนี้เป็นชุดหน้าจอทั่วไปที่สามารถ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 Composable นอกจากนี้ ยังเชื่อมต่อ หน้าจอด้วย 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 ในกรณีนี้ แทนที่จะได้รับสถานะ UI จาก ดูโมเดลนี้ได้จาก 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 เพื่อรักษาหน้าจอและประเภทเส้นทางให้เป็นส่วนตัว