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

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

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

ตั้งค่า

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

Kotlin

dependencies {
    def wear_compose_version = "1.5.0"
    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

Kotlin

val navController = rememberSwipeDismissableNavController()

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

Kotlin

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

เช่นเดียวกับ NavHost Composable โดยจะใช้การอ้างอิงไปยังตัวควบคุมการนำทาง เส้นทางสำหรับจุดเริ่มต้น และปลายทาง รวมถึงตัวสร้างสำหรับกราฟการนำทางซึ่งแสดงที่นี่เป็น 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 ได้ที่ การนำทางด้วย Compose หรือเข้าร่วม โค้ดแล็บการนำทาง Jetpack Compose