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

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

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

ตั้งค่า

ใช้ Dependency ต่อไปนี้ในไฟล์ build.gradle ของโมดูลแอป

Kotlin

dependencies {
    def wear_compose_version = "1.4.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 ซึ่งจะควบคุมการไปยังส่วนต่างๆ ของคอมโพสิเบิลในโฮสต์การนำทาง ซึ่งใน Wear OS จะเป็น SwipeDismissableNavHost

Kotlin

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

เช่นเดียวกับคอมโพสิเบิล NavHost คอมโพสิเบิลนี้จะอ้างอิงไปยังตัวควบคุมการนําทาง เส้นทางสําหรับจุดเริ่มต้นและจุดหมาย และบิลเดอร์สําหรับกราฟการนําทาง ซึ่งแสดงที่นี่เป็นแลมบ์ดาต่อท้าย

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

ในแอป Wear OS ให้ประกาศ SwipeDismissableNavHost เป็นเนื้อหาของ Scaffold เพื่อรองรับคอมโพเนนต์ระดับบนสุด เช่น เวลา สัญญาณบอกสถานะการเลื่อน/ตำแหน่ง และสัญญาณบอกสถานะหน้า ใช้ออบเจ็กต์ Horologist 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")!!)
        }
    }
}
// ...
// .. Screen level content goes here
val scrollState = rememberScrollState()

ScreenScaffold(scrollState = scrollState) {
    // Screen content goes here
Navigation.kt

ดูข้อมูลเพิ่มเติมเกี่ยวกับการไปยังส่วนต่างๆ ใน Jetpack Compose ได้ที่หัวข้อการไปยังส่วนต่างๆ ด้วย Compose หรือเข้าร่วมห้องทดลองโค้ดการไปยังส่วนต่างๆ ใน Jetpack Compose