การไปยังส่วนต่างๆ ด้วย Compose สำหรับ Wear OS

คอมโพเนนต์การนำทาง ใน Android Jetpack รองรับ แอปพลิเคชัน Jetpack Compose คุณสามารถนำทางไปมาระหว่าง Composable ต่างๆ ขณะที่ใช้ประโยชน์จากโครงสร้างพื้นฐานและ ฟีเจอร์ของคอมโพเนนต์การนำทาง

หน้านี้จะอธิบายความแตกต่างของ Jetpack Navigation ใน Compose สำหรับ Wear OS

ตั้งค่า

ใช้ทรัพยากร Dependency ต่อไปนี้ในไฟล์ build.gradle ของโมดูลแอป

Kotlin

dependencies {
    def wear_compose_version = "1.5.6"
    implementation "androidx.wear.compose:compose-navigation:$wear_compose_version"
}

สำหรับใช้แทนอาร์ติแฟกต์ androidx.navigation:navigation-compose เนื่องจากมีข้อมูลการติดตั้งใช้งานทางเลือกสำหรับ Wear OS โดยเฉพาะ

สร้างตัวควบคุม โฮสต์ และกราฟสำหรับการนำทาง

การนำทางด้วย Compose สำหรับ Wear OS ต้องใช้คอมโพเนนต์แบบเดียวกัน 3 รายการเช่นเดียวกับแอปที่ไม่ใช่ Wear OS ได้แก่ ตัวควบคุมการนำทาง โฮสต์ และกราฟ

ใช้ rememberSwipeDismissableNavController() เพื่อสร้างอินสแตนซ์ของ WearNavigator ซึ่งเป็นการใช้งาน NavController ที่เหมาะสำหรับแอปพลิเคชัน Wear OS

val navController = rememberSwipeDismissableNavController()
Navigation.kt

NavController เป็น API หลักที่ใช้สำหรับนำทางในแอปพลิเคชันของ Compose โดยจะควบคุมการนำทาง ระหว่าง Composable ในโฮสต์การนำทาง ซึ่งใน Wear OS คือ SwipeDismissableNavHost

val navController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
    navController = navController,
    startDestination = "message_list"
) {
    // TODO: build navigation graph
}
Navigation.kt

เช่นเดียวกับ NavHost Composable API นี้จะอ้างอิงไปยังตัวควบคุมการนำทาง เส้นทางสำหรับจุดเริ่มต้น ปลายทาง และเครื่องมือสร้างสำหรับกราฟการนำทาง ซึ่งแสดงที่นี่เป็น Trailing Lambda

ต้องระบุปลายทางเริ่มต้นในเครื่องมือสร้างกราฟการนำทาง พร้อมกับปลายทางอื่นๆ ทั้งหมดที่ควรนำทางได้ด้วยตัวควบคุมการนำทาง

ในแอป Wear OS ให้แจ้งว่า SwipeDismissableNavHost เป็นเนื้อหาของ AppScaffold เพื่อรองรับคอมโพเนนต์ระดับบนสุด เช่น เวลา การเลื่อนหรือตัวระบุตำแหน่ง และตัวระบุหน้า ใช้ออบเจ็กต์ AppScaffold เหนือ SwipeDismissableNavHost และ ScreenScaffold ที่ระดับหน้าจอเพื่อเพิ่มออบเจ็กต์ TimeText ลงในหน้าจอตามค่าเริ่มต้น และเพื่อให้แน่ใจว่าออบเจ็กต์จะเคลื่อนไหวอย่างถูกต้องเมื่อนำทาง ระหว่างหน้าจอ นอกจากนี้ ScreenScaffold ยังเพิ่ม PositionIndicator สำหรับเนื้อหาที่เลื่อนได้ด้วย 
    AppScaffold {
        val navController = rememberSwipeDismissableNavController()
        SwipeDismissableNavHost(
            navController = navController,
            startDestination = "message_list"
        ) {
            composable("message_list") {
                MessageList(onMessageClick = { id ->
                    navController.navigate("message_detail/$id")
                })
            }
            composable("message_detail/{id}") {
                MessageDetail(id = it.arguments?.getString("id")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()

    val padding = rememberResponsiveColumnPadding(
        first = ColumnItemType.BodyText
    )

    ScreenScaffold(
        scrollState = scrollState,
        contentPadding = padding
    ) { scaffoldPaddingValues ->
        // Screen content goes here
        // ...
Navigation.kt

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Jetpack Navigation ได้ที่ การนำทางด้วย Compose หรือทำตาม Codelab การนำทาง Jetpack Compose