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

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

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

ตั้งค่า

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

Kotlin

dependencies {
    def wear_compose_version = "1.4.1"
    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 composable คอมโพเนนต์นี้จะอ้างอิงไปยังตัวควบคุมการนําทาง เส้นทางสําหรับจุดเริ่มต้นและจุดหมาย และตัวสร้างกราฟการนําทางที่แสดงที่นี่เป็นแลมบ์ดาต่อท้าย

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

ในแอป 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
    ) {
        // Screen content goes here
Navigation.kt

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