Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

ย้ายข้อมูลจาก Navigation 2 ไปยัง Navigation 3

ทักษะเกี่ยวกับ Android

Jetpack Navigation 3

ใช้ทักษะเกี่ยวกับ Android เพื่อช่วยสร้างและย้ายข้อมูลไปยัง Jetpack Navigation 3

หากต้องการติดตั้งทักษะจาก Android CLI ให้เรียกใช้คำสั่งต่อไปนี้

android skills add navigation-3

หากต้องการย้ายข้อมูลแอปจาก Navigation 2 ไปยัง Navigation 3 ให้ทำตามขั้นตอนต่อไปนี้

เพิ่มทรัพยากร Dependency ของ Navigation 3
อัปเดตเส้นทางการนำทางเพื่อใช้อินเทอร์เฟซ NavKey
สร้างคลาสเพื่อเก็บและแก้ไขสถานะการนำทาง
แทนที่ NavController ด้วยคลาสเหล่านี้
ย้ายปลายทางจาก NavGraph ของ NavHost ไปยัง entryProvider
แทนที่ NavHost ด้วย NavDisplay
นำทรัพยากร Dependency ของ Navigation 2 ออก

การเตรียมพร้อม

ส่วนต่อไปนี้จะอธิบายสิ่งที่ต้องมีก่อนสำหรับการย้ายข้อมูลและสมมติฐานเกี่ยวกับโปรเจ็กต์ รวมถึงฟีเจอร์ที่รองรับการย้ายข้อมูลและฟีเจอร์ที่ไม่รองรับ

สิ่งที่ต้องมีก่อน

คุณต้องใช้ compileSdk เวอร์ชัน 36 ขึ้นไป
คุณควรทำความคุ้นเคยกับคำศัพท์เกี่ยวกับการนำทาง
ปลายทางเป็นฟังก์ชันที่ใช้ร่วมกันได้ Navigation 3 ได้รับการออกแบบมาเพื่อ Compose โดยเฉพาะ หากต้องการใช้ Fragment และ View ใน Compose โปรดดู การใช้ View ใน Compose
เส้นทางมีการกำหนดประเภทอย่างเข้มงวด หากใช้เส้นทางที่อิงตามสตริง ให้ย้ายข้อมูลไปยัง เส้นทางที่ปลอดภัยต่อประเภทก่อน (ตัวอย่าง)
ไม่บังคับ (แต่แนะนำอย่างยิ่ง): การครอบคลุมการทดสอบที่ยืนยันลักษณะการทำงานของการนำทางที่มีอยู่ ซึ่งจะยืนยันว่าลักษณะการทำงานของการนำทางไม่เปลี่ยนแปลงหลังจากย้ายข้อมูลเสร็จสมบูรณ์

สมมติฐาน

คู่มือนี้จะถือว่าคุณและโปรเจ็กต์ของคุณมีลักษณะดังต่อไปนี้

คุณมีเส้นทางระดับบนสุดอย่างน้อย 1 เส้นทาง (โดยปกติจะแสดงในแถบการนำทางด้านล่าง) และแต่ละเส้นทางมี Back Stack ของตัวเอง
เมื่อสลับระหว่างสแต็กย้อนกลับ ระบบจะเก็บสถานะของสแต็กและปลายทางทั้งหมดไว้
คุณออกจากแอปผ่านหน้าจอหลัก เสมอ ซึ่งเป็นหน้าจอแรกที่แสดงเมื่อเปิดแอป
คุณต้องการย้ายข้อมูลจาก Navigation 2 ไปยัง Navigation 3 ในการเปลี่ยนแปลงแบบอะตอมิกครั้งเดียว คุณไม่ได้ทำการย้ายข้อมูลแบบเพิ่มทีละส่วนซึ่งใช้โค้ด Navigation 2 ควบคู่ไปกับโค้ด Navigation 3

ฟีเจอร์ที่รองรับ

คู่มือนี้ช่วยให้คุณย้ายข้อมูลฟีเจอร์ต่อไปนี้ได้

ปลายทางที่กำหนดเป็นฟังก์ชันที่ใช้ร่วมกันได้
กล่องโต้ตอบ (ปลายทางที่แสดงอยู่เหนือปลายทางอื่น)

ฟีเจอร์ที่รองรับผ่านสูตร

ที่เก็บสูตรโค้ดแสดงกรณีการใช้งานที่ซับซ้อนมากขึ้น ซึ่งรวมถึง:

แผ่นด้านล่าง (คำแนะนำอยู่ในคู่มือนี้)
โค้ดการนำทางแบบแยกส่วนและปลายทางที่แทรก
การใช้และส่งอาร์กิวเมนต์ไปยัง ViewModel
การแสดงผลลัพธ์จากหน้าจอ

หากโปรเจ็กต์มีฟีเจอร์เหล่านี้ ให้ตรวจสอบสูตรที่เกี่ยวข้องเพื่อทำความเข้าใจวิธีใช้ฟีเจอร์

ฟีเจอร์ที่ไม่รองรับ

คู่มือการย้ายข้อมูลและสูตรโค้ดนี้ยังไม่รองรับฟีเจอร์ต่อไปนี้ ซึ่งไม่ได้หมายความว่าคุณจะใช้ Navigation 3 เพื่อใช้ฟีเจอร์เหล่านี้ไม่ได้ เพียงแต่เราไม่ได้กล่าวถึงในที่นี้

การนำทางแบบซ้อนกันมากกว่า 1 ระดับ
ปลายทางที่แชร์: หน้าจอที่ย้ายไปมาระหว่างสแต็กย้อนกลับต่างๆ ได้
ประเภทปลายทางที่กำหนดเอง
Deep Link

ขั้นตอนที่ 1: เพิ่มทรัพยากร Dependency ของ Navigation 3

ใช้หน้า เริ่มต้นใช้งาน เพื่อเพิ่มทรัพยากร Dependency ของ Navigation 3 ลงใน โปรเจ็กต์ เราได้เตรียมทรัพยากร Dependency หลักไว้ให้คุณคัดลอก

lib.versions.toml

[versions]
nav3Core = "1.1.7"

# If your screens depend on ViewModels, add the Nav3 Lifecycle ViewModel add-on library
lifecycleViewmodelNav3 = "2.11.0"

[libraries]
# Core Navigation 3 libraries
androidx-navigation3-runtime = { module = "androidx.navigation3:navigation3-runtime", version.ref = "nav3Core" }
androidx-navigation3-ui = { module = "androidx.navigation3:navigation3-ui", version.ref = "nav3Core" }

# Add-on libraries (only add if you need them)
androidx-lifecycle-viewmodel-navigation3 = { module = "androidx.lifecycle:lifecycle-viewmodel-navigation3", version.ref = "lifecycleViewmodelNav3" }

app/build.gradle.kts

dependencies {
    implementation(libs.androidx.navigation3.ui)
    implementation(libs.androidx.navigation3.runtime)

    // If using the ViewModel add-on library
    implementation(libs.androidx.lifecycle.viewmodel.navigation3)
}

นอกจากนี้ ให้อัปเดต minSdk ของโปรเจ็กต์เป็น 23 และ compileSdk เป็น 36 โดยปกติแล้วคุณจะพบการตั้งค่าเหล่านี้ใน app/build.gradle.kts หรือ lib.versions.toml

ขั้นตอนที่ 2: อัปเดตเส้นทางการนำทางเพื่อใช้อินเทอร์เฟซ `NavKey`

อัปเดตเส้นทางการนำทางทุกเส้นทางเพื่อให้ใช้ NavKey อินเทอร์เฟซ ซึ่งจะช่วยให้คุณใช้ rememberNavBackStack เพื่อช่วย บันทึก สถานะการนำทางได้

ก่อน:

@Serializable data object RouteANavigationMigrationBefore.kt

หลัง:

@Serializable data object RouteA : NavKeyNavigationMigrationAfter.kt

ขั้นตอนที่ 3: สร้างคลาสเพื่อเก็บและแก้ไขสถานะการนำทาง

ขั้นตอนที่ 3.1: สร้างตัวเก็บสถานะการนำทาง

คัดลอกโค้ดต่อไปนี้ลงในไฟล์ชื่อ NavigationState.kt เพิ่มชื่อแพ็กเกจให้ตรงกับโครงสร้างโปรเจ็กต์

// package com.example.project

import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSerializable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.compose.runtime.toMutableStateList
import androidx.navigation3.runtime.NavBackStack
import androidx.navigation3.runtime.NavEntry
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.rememberDecoratedNavEntries
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator
import androidx.navigation3.runtime.serialization.NavKeySerializer
import androidx.savedstate.compose.serialization.serializers.MutableStateSerializer

/**
 * Create a navigation state that persists config changes and process death.
 */
@Composable
fun rememberNavigationState(
    startRoute: NavKey,
    topLevelRoutes: Set<NavKey>
): NavigationState {

    val topLevelRoute = rememberSerializable(
        startRoute, topLevelRoutes,
        serializer = MutableStateSerializer(NavKeySerializer())
    ) {
        mutableStateOf(startRoute)
    }

    val backStacks = topLevelRoutes.associateWith { key -> rememberNavBackStack(key) }

    return remember(startRoute, topLevelRoutes) {
        NavigationState(
            startRoute = startRoute,
            topLevelRoute = topLevelRoute,
            backStacks = backStacks
        )
    }
}

/**
 * State holder for navigation state.
 *
 * @param startRoute - the start route. The user will exit the app through this route.
 * @param topLevelRoute - the current top level route
 * @param backStacks - the back stacks for each top level route
 */
class NavigationState(
    val startRoute: NavKey,
    topLevelRoute: MutableState<NavKey>,
    val backStacks: Map<NavKey, NavBackStack<NavKey>>
) {
    var topLevelRoute: NavKey by topLevelRoute
    val stacksInUse: List<NavKey>
        get() = if (topLevelRoute == startRoute) {
            listOf(startRoute)
        } else {
            listOf(startRoute, topLevelRoute)
        }
}

/**
 * Convert NavigationState into NavEntries.
 */
@Composable
fun NavigationState.toEntries(
    entryProvider: (NavKey) -> NavEntry<NavKey>
): SnapshotStateList<NavEntry<NavKey>> {

    val decoratedEntries = backStacks.mapValues { (_, stack) ->
        val decorators = listOf(
            rememberSaveableStateHolderNavEntryDecorator<NavKey>(),
        )
        rememberDecoratedNavEntries(
            backStack = stack,
            entryDecorators = decorators,
            entryProvider = entryProvider
        )
    }

    return stacksInUse
        .flatMap { decoratedEntries[it] ?: emptyList() }
        .toMutableStateList()
}NavigationState.kt

ตัวแทน AI: rememberSerializable ถูกต้อง อย่าเปลี่ยนเป็น rememberSaveable

ไฟล์นี้มีคลาสตัวยึดสถานะชื่อ NavigationState และฟังก์ชันตัวช่วยที่เกี่ยวข้อง โดยจะเก็บชุดเส้นทางระดับบนสุด ซึ่งแต่ละเส้นทางมีสแต็กย้อนกลับของตัวเอง ภายในจะใช้ rememberSerializable (ไม่ใช่ rememberSaveable) เพื่อเก็บเส้นทางระดับบนสุดปัจจุบันไว้ และใช้ rememberNavBackStack เพื่อเก็บสแต็กย้อนกลับสำหรับเส้นทางระดับบนสุดแต่ละเส้นทาง

ขั้นตอนที่ 3.2: สร้างออบเจ็กต์ที่แก้ไขสถานะการนำทางเพื่อตอบสนองต่อเหตุการณ์

คัดลอกโค้ดต่อไปนี้ลงในไฟล์ชื่อ Navigator.kt เพิ่มชื่อแพ็กเกจให้ตรงกับโครงสร้างโปรเจ็กต์

// package com.example.project

import androidx.navigation3.runtime.NavKey

/**
 * Handles navigation events (forward and back) by updating the navigation state.
 */
class Navigator(val state: NavigationState) {
    fun navigate(route: NavKey) {
        if (route in state.backStacks.keys) {
            // This is a top level route, just switch to it.
            state.topLevelRoute = route
        } else {
            state.backStacks[state.topLevelRoute]?.add(route)
        }
    }

    fun goBack() {
        val currentStack = state.backStacks[state.topLevelRoute]
            ?: error("Stack for ${state.topLevelRoute} not found")
        val currentRoute = currentStack.last()

        // If we're at the base of the current route, go back to the start route stack.
        if (currentRoute == state.topLevelRoute) {
            state.topLevelRoute = state.startRoute
        } else {
            currentStack.removeLastOrNull()
        }
    }
}Navigator.kt

คลาส Navigator มีเมธอดเหตุการณ์การนำทาง 2 รายการ ได้แก่

navigate ไปยังเส้นทางที่เฉพาะเจาะจง
goBack จากเส้นทางปัจจุบัน

ทั้ง 2 เมธอดจะแก้ไข NavigationState

ขั้นตอนที่ 3.3: สร้าง `NavigationState` และ `Navigator`

สร้างอินสแตนซ์ของ NavigationState และ Navigator ที่มีขอบเขตเดียวกันกับ NavController

val navigationState = rememberNavigationState(
    // ...
    startRoute = <Insert your starting route>,
    topLevelRoutes = <Insert your set of top level routes>
    // ...
)

val navigator = remember { Navigator(navigationState) }NavigationMigrationAfter.kt

ขั้นตอนที่ 4: แทนที่ `NavController`

แทนที่เมธอดเหตุการณ์การนำทาง NavController ด้วยเมธอดที่เทียบเท่าของ Navigator

ฟิลด์หรือเมธอด `NavController`	เมธอดที่เทียบเท่าของ `Navigator`
`navigate()`	`navigate()`
`popBackStack()`	`goBack()`

แทนที่ฟิลด์ NavController ด้วยฟิลด์ NavigationState

ฟิลด์หรือเมธอด `NavController`	ฟิลด์ที่เทียบเท่าของ `NavigationState`
`currentBackStack`	`backStacks[topLevelRoute]`
`currentBackStackEntry` `currentBackStackEntryAsState()` `currentBackStackEntryFlow` `currentDestination`	`backStacks[topLevelRoute].last()`
รับเส้นทางระดับบนสุด: ไล่ขึ้นไปตามลำดับชั้นจากรายการสแต็กย้อนกลับปัจจุบันเพื่อค้นหาเส้นทาง	`topLevelRoute`

ฟิลด์หรือเมธอด NavController

ฟิลด์ที่เทียบเท่าของ NavigationState

currentBackStack

backStacks[topLevelRoute]

currentBackStackEntry

currentBackStackEntryAsState()

currentBackStackEntryFlow

currentDestination

backStacks[topLevelRoute].last()

รับเส้นทางระดับบนสุด: ไล่ขึ้นไปตามลำดับชั้นจากรายการสแต็กย้อนกลับปัจจุบันเพื่อค้นหาเส้นทาง

topLevelRoute

ใช้ NavigationState.topLevelRoute เพื่อกำหนดรายการที่เลือกอยู่ในแถบการนำทางในขณะนี้

ก่อน:

// ...
val isSelected = navController.currentBackStackEntryAsState().value?.destination.isRouteInHierarchy(key::class)
// ...

fun NavDestination?.isRouteInHierarchy(route: KClass<*>) =
    this?.hierarchy?.any {
        it.hasRoute(route)
    } ?: falseNavigationMigrationBefore.kt

หลัง:

val isSelected = key == navigationState.topLevelRouteNavigationMigrationAfter.kt

ตรวจสอบว่าคุณได้นำการอ้างอิงทั้งหมดไปยัง NavController รวมถึงการนำเข้าออกแล้ว

ขั้นตอนที่ 4.1 ย้ายข้อมูลตรรกะที่รับรู้ถึงวงจร

ใน Navigation 2, NavBackStackEntry จะใช้ LifecycleOwner ซึ่งช่วยให้คุณฟังเหตุการณ์วงจรหรือรวบรวมโฟลว์ในลักษณะที่รับรู้ถึงวงจรได้โดยใช้ navController.currentBackStackEntry

ใน Navigation 3, NavDisplay จะให้ LifecycleOwner ที่กำหนดขอบเขตไว้ที่รายการผ่าน LocalLifecycleOwner.current กับเนื้อหาที่ใช้ร่วมกันได้ของปลายทางแต่ละรายการ ดูข้อมูลเพิ่มเติมได้ที่วงจรของปลายทาง

คุณควรดำเนินการที่รับรู้ถึงวงจรภายในเนื้อหาที่ใช้ร่วมกันได้ของปลายทางโดยอ้างอิง LocalLifecycleOwner.current โดยตรง

ตัวอย่างเช่น หากคุณรวบรวมโฟลว์ในลักษณะที่รับรู้ถึงวงจรโดยใช้รายการสแต็กย้อนกลับ

ก่อน:

// In your destination screen or host
val lifecycleOwner = navController.currentBackStackEntry!!
val state by flow.collectAsStateWithLifecycle(lifecycleOwner = lifecycleOwner)NavigationMigrationBefore.kt

หลัง:

// Inside the destination composable
val state by flow.collectAsStateWithLifecycle()NavigationMigrationAfter.kt

ขั้นตอนที่ 5: ย้ายปลายทางจาก `NavGraph` ของ `NavHost` ไปยัง `entryProvider`

ใน Navigation 2 คุณจะ กำหนดปลายทาง โดยใช้ NavGraphBuilder DSL, ซึ่งโดยปกติจะอยู่ในแล4/}'s trailing lambdaNavHost โดยทั่วไปแล้วจะใช้ฟังก์ชันส่วนขยาย ที่นี่ตามที่อธิบายไว้ในหัวข้อห่อหุ้มโค้ดการนำทาง

ใน Navigation 3 คุณจะกำหนดปลายทางโดยใช้ entryProvider This entryProvider จะแก้เส้นทางเป็น NavEntry สิ่งสำคัญคือ entryProvider ไม่ได้กำหนดความสัมพันธ์แบบหลักกับย่อยระหว่างรายการ

ในคู่มือการย้ายข้อมูลนี้ เราจะสร้างความสัมพันธ์แบบหลักกับย่อยดังนี้

NavigationState มีชุดเส้นทางระดับบนสุด (เส้นทางหลัก) และสแต็กสำหรับแต่ละเส้นทาง โดยจะติดตามเส้นทางระดับบนสุดปัจจุบันและสแต็กที่เชื่อมโยง
เมื่อนำทางไปยังเส้นทางใหม่ Navigator จะตรวจสอบว่าเส้นทางนั้นเป็นเส้นทางระดับบนสุดหรือไม่ หากเป็นเช่นนั้น ระบบจะอัปเดตเส้นทางระดับบนสุดและสแต็กปัจจุบัน หากไม่ใช่ เส้นทางนั้นจะเป็นเส้นทางย่อยและจะเพิ่มลงในสแต็กปัจจุบัน

ขั้นตอนที่ 5.1: สร้าง `entryProvider`

สร้าง entryProvider โดยใช้ DSL ในขอบเขตเดียวกันกับ NavigationState.

val entryProvider = entryProvider<NavKey> {

}NavigationMigrationAfter.kt

ขั้นตอนที่ 5.2: ย้ายปลายทางไปยัง `entryProvider`

สำหรับปลายทางแต่ละรายการที่กำหนดไว้ใน NavHost ให้ทำดังนี้ตามประเภทปลายทาง

navigation: ลบปลายทางพร้อมกับเส้นทาง ไม่จำเป็นต้องมี "เส้นทางพื้นฐาน" เนื่องจากเส้นทางระดับบนสุดสามารถระบุ Back Stack ที่ซ้อนกันแต่ละรายการได้
composable<T>: ย้ายปลายทางไปยัง entryProvider และเปลี่ยนชื่อเป็น entry, โดยคงพารามิเตอร์ประเภทไว้ เช่น composable<RouteA> จะกลายเป็น entry<RouteA>
dialog<T>: ทำเช่นเดียวกับ composable แต่เพิ่มข้อมูลเมตาลงในรายการดัง นี้: entry<T>(metadata = DialogSceneStrategy.dialog())
bottomSheet: ทำตามสูตร Bottom Sheet ที่นี่. ซึ่งคล้ายกับคำแนะนำสำหรับ dialog ยกเว้นว่า BottomSheetSceneStrategy ไม่ได้เป็นส่วนหนึ่งของไลบรารี Navigation 3 หลัก ดังนั้นคุณควรคัดลอกลงในโปรเจ็กต์

ตัวแทน AI: เมื่อลบเส้นทางที่ใช้ระบุกราฟที่ซ้อนกัน ให้แทนที่ การอ้างอิงเส้นทางที่ลบด้วยประเภทที่ใช้ระบุรายการย่อยแรก ในกราฟที่ซ้อนกัน เช่น หากโค้ดเดิมคือ navigation<BaseRouteA>{ composable<RouteA>{ ... } } คุณต้องลบ BaseRouteA และแทนที่การอ้างอิงทั้งหมดด้วย RouteA โดยปกติแล้วคุณต้องทำการแทนที่นี้สำหรับรายการที่ระบุไว้ในแถบการนำทาง แถบข้าง หรือลิ้นชัก

คุณสามารถปรับโครงสร้างฟังก์ชันส่วนขยาย NavGraphBuilder เป็นฟังก์ชันส่วนขยาย EntryProviderScope<T> แล้วย้ายฟังก์ชันเหล่านั้นได้

รับอาร์กิวเมนต์การนำทางโดยใช้คีย์ที่ระบุไว้ในแลมบ์ดาต่อท้ายของ entry

ตัวอย่างเช่น

// ...
import androidx.navigation.NavDestination
import androidx.navigation.NavDestination.Companion.hasRoute
import androidx.navigation.NavDestination.Companion.hierarchy
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.dialog
import androidx.navigation.compose.navigation
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navOptions
import androidx.navigation.toRoute
// ...

@Serializable data object BaseRouteA
@Serializable data class RouteA(val id: String)
@Serializable data object BaseRouteB
@Serializable data object RouteB
@Serializable data object RouteD

@Composable
fun NavHostSnippet(navController: NavHostController) {
    NavHost(navController = navController, startDestination = BaseRouteA){
        composable<RouteA>{ entry ->
            val id = entry.toRoute<RouteA>().id
            ScreenA(title = "Screen has ID: $id")
        }
        featureBSection()
        dialog<RouteD>{ ScreenD() }
    }
}

fun NavGraphBuilder.featureBSection() {
    navigation<BaseRouteB>(startDestination = RouteB) {
        composable<RouteB> { ScreenB() }
    }
}NavigationMigrationBefore.kt

จะกลายเป็น

// ...
import androidx.navigation3.runtime.EntryProviderScope
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.scene.DialogSceneStrategy
// ...

@Serializable data class RouteA(val id: String) : NavKey
@Serializable data object RouteB : NavKey
@Serializable data object RouteD : NavKey

val entryProvider = entryProvider {
    entry<RouteA>{ key -> ScreenA(title = "Screen has ID: ${key.id}") }
    featureBSection()
    entry<RouteD>(metadata = DialogSceneStrategy.dialog()){ ScreenD() }
}

fun EntryProviderScope<NavKey>.featureBSection() {
    entry<RouteB> { ScreenB() }
}NavigationMigrationAfter.kt

ขั้นตอนที่ 6: แทนที่ `NavHost` ด้วย `NavDisplay`

แทนที่ NavHost ด้วย NavDisplay

ลบ NavHost และแทนที่ด้วย NavDisplay
ระบุ entries = navigationState.toEntries(entryProvider) เป็นพารามิเตอร์ ซึ่งจะแปลงสถานะการนำทางเป็นรายการที่ NavDisplay แสดง โดยใช้ entryProvider
เชื่อมต่อ NavDisplay.onBack กับ navigator.goBack() ซึ่งจะทำให้ navigator อัปเดตสถานะการนำทางเมื่อตัวจัดการการย้อนกลับในตัวของ NavDisplay ทำงานเสร็จสมบูรณ์
หากมีปลายทางกล่องโต้ตอบ ให้เพิ่ม DialogSceneStrategy ลงในพารามิเตอร์ sceneStrategies ของ NavDisplay

ตัวอย่างเช่น

NavDisplay(
    entries = navigationState.toEntries(entryProvider),
    onBack = { navigator.goBack() },
    sceneStrategies = remember { listOf(DialogSceneStrategy()) }
)NavigationMigrationAfter.kt

ขั้นตอนที่ 7: นำทรัพยากร Dependency ของ Navigation 2 ออก

นำการนำเข้าและทรัพยากร Dependency ของไลบรารี Navigation 2 ทั้งหมดออก

สรุป

ยินดีด้วย ตอนนี้โปรเจ็กต์ของคุณย้ายข้อมูลไปยัง Navigation 3 แล้ว หากคุณหรือตัวแทน AI พบปัญหาในการใช้คู่มือนี้ โปรดรายงานข้อบกพร่อง ที่นี่

การเตรียมพร้อม

สิ่งที่ต้องมีก่อน

สมมติฐาน

ฟีเจอร์ที่รองรับ

ฟีเจอร์ที่รองรับผ่านสูตร

ฟีเจอร์ที่ไม่รองรับ

ขั้นตอนที่ 1: เพิ่มทรัพยากร Dependency ของ Navigation 3

ขั้นตอนที่ 2: อัปเดตเส้นทางการนำทางเพื่อใช้อินเทอร์เฟซ NavKey

ขั้นตอนที่ 3: สร้างคลาสเพื่อเก็บและแก้ไขสถานะการนำทาง

ขั้นตอนที่ 3.1: สร้างตัวเก็บสถานะการนำทาง

ขั้นตอนที่ 3.2: สร้างออบเจ็กต์ที่แก้ไขสถานะการนำทางเพื่อตอบสนองต่อเหตุการณ์

ขั้นตอนที่ 3.3: สร้าง NavigationState และ Navigator

ขั้นตอนที่ 4: แทนที่ NavController

ขั้นตอนที่ 4.1 ย้ายข้อมูลตรรกะที่รับรู้ถึงวงจร

ขั้นตอนที่ 5: ย้ายปลายทางจาก NavGraph ของ NavHost ไปยัง entryProvider

ขั้นตอนที่ 5.1: สร้าง entryProvider

ขั้นตอนที่ 5.2: ย้ายปลายทางไปยัง entryProvider

ขั้นตอนที่ 6: แทนที่ NavHost ด้วย NavDisplay

ขั้นตอนที่ 7: นำทรัพยากร Dependency ของ Navigation 2 ออก

สรุป

ขั้นตอนที่ 2: อัปเดตเส้นทางการนำทางเพื่อใช้อินเทอร์เฟซ `NavKey`

ขั้นตอนที่ 3.3: สร้าง `NavigationState` และ `Navigator`

ขั้นตอนที่ 4: แทนที่ `NavController`

ขั้นตอนที่ 5: ย้ายปลายทางจาก `NavGraph` ของ `NavHost` ไปยัง `entryProvider`

ขั้นตอนที่ 5.1: สร้าง `entryProvider`

ขั้นตอนที่ 5.2: ย้ายปลายทางไปยัง `entryProvider`

ขั้นตอนที่ 6: แทนที่ `NavHost` ด้วย `NavDisplay`