สร้างเลย์เอาต์รายละเอียดรายการ

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• adaptive: องค์ประกอบระดับต่ำ เช่น HingeInfo และ Posture
• adaptive-layout: เลย์เอาต์แบบปรับขนาดได้ เช่น ListDetailPaneScaffold และ SupportingPaneScaffold
• adaptive-navigation: Composable สำหรับการไปยังส่วนต่างๆ ภายในและระหว่างแผง รวมถึงเลย์เอาต์แบบปรับเปลี่ยนได้ที่รองรับการไปยังส่วนต่างๆ โดยค่าเริ่มต้น เช่น NavigableListDetailPaneScaffold และ NavigableSupportingPaneScaffold

ตรวจสอบว่าโปรเจ็กต์มี compose-material3-adaptive เวอร์ชัน 1.1.0-beta1 ขึ้นไป

เลือกใช้ท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้

หากต้องการเปิดใช้ภาพเคลื่อนไหวการย้อนกลับที่คาดการณ์ได้ใน Android 15 หรือต่ำกว่า คุณต้องเลือกใช้เพื่อรองรับท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้ หากต้องการเลือกใช้ ให้เพิ่ม android:enableOnBackInvokedCallback="true" ลงในแท็ก <application> หรือแท็ก <activity> แต่ละแท็กภายในไฟล์ AndroidManifest.xml ดูข้อมูลเพิ่มเติมได้ที่เลือกใช้ท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้

เมื่อแอปกำหนดเป้าหมายเป็น Android 16 (ระดับ API 36) ขึ้นไป ระบบจะเปิดใช้การย้อนกลับที่คาดการณ์ได้โดยค่าเริ่มต้น

การใช้งานพื้นฐาน

ใช้ NavigableListDetailPaneScaffold ดังนี้

1. ใช้คลาสที่แสดงถึงเนื้อหาที่เลือก ใช้คลาส Parcelable เพื่อรองรับการบันทึกและกู้คืนรายการที่เลือก ใช้ปลั๊กอิน kotlin-parcelize เพื่อสร้างโค้ดให้คุณ
2. สร้าง ThreePaneScaffoldNavigator ด้วย rememberListDetailPaneScaffoldNavigator

เครื่องมือนำทางนี้ใช้เพื่อย้ายไปมาระหว่างแผงรายการ แผงรายละเอียด และแผงเพิ่มเติม เมื่อประกาศประเภททั่วไป ตัวนำทางจะติดตามสถานะของ Scaffold ด้วย (นั่นคือ MyItem ใดที่แสดงอยู่) เนื่องจากประเภทนี้เป็นแบบ Parcelable จึงสามารถบันทึกและกู้คืนสถานะได้โดย Navigator เพื่อจัดการการเปลี่ยนแปลงการกำหนดค่าโดยอัตโนมัติ

1. ส่ง Navigator ไปยัง NavigableListDetailPaneScaffold Composable

2. ระบุการติดตั้งใช้งานแผงรายการให้กับ NavigableListDetailPaneScaffold ใช้ AnimatedPane เพื่อใช้ภาพเคลื่อนไหวของแผงเริ่มต้นระหว่างการไปยังส่วนต่างๆ จากนั้นใช้ ThreePaneScaffoldNavigator เพื่อไปยังแผงรายละเอียด ListDetailPaneScaffoldRole.Detail และแสดงรายการที่ส่งมา

3. รวมการติดตั้งใช้งานแผงรายละเอียดใน NavigableListDetailPaneScaffold

เมื่อการนำทางเสร็จสมบูรณ์ currentDestination จะมีแผงที่แอปของคุณนำทางไป รวมถึงเนื้อหาที่แสดงในแผง พร็อพเพอร์ตี้ contentKey เป็นประเภทเดียวกับที่ระบุไว้ในการเรียกเดิม คุณจึงเข้าถึงข้อมูลที่ต้องการแสดงได้

1. คุณสามารถเปลี่ยน defaultBackBehavior ใน NavigableListDetailPaneScaffold ได้ (ไม่บังคับ) โดยค่าเริ่มต้น NavigableListDetailPaneScaffold จะใช้ PopUntilScaffoldValueChange สำหรับ defaultBackBehavior

หากแอปของคุณต้องใช้รูปแบบการนำทางย้อนกลับที่แตกต่างออกไป คุณสามารถลบล้างลักษณะการทำงานนี้ได้โดยระบุตัวเลือก BackNavigationBehavior อื่น

BackNavigationBehavior ตัวเลือก

ส่วนต่อไปนี้ใช้ตัวอย่างของแอปอีเมลที่มีรายการอีเมลในแผงหนึ่งและมุมมองแบบละเอียดในอีกแผงหนึ่ง

PopUntilScaffoldValueChange (ค่าเริ่มต้นและแนะนำในกรณีส่วนใหญ่)

ลักษณะการทำงานนี้มุ่งเน้นไปที่การเปลี่ยนแปลงโครงสร้างเลย์เอาต์โดยรวม ในการตั้งค่าแบบหลายแผง การเปลี่ยนเนื้อหาอีเมลในแผงรายละเอียดจะไม่เปลี่ยนแปลงโครงสร้างเลย์เอาต์ที่สำคัญ ดังนั้น ปุ่มย้อนกลับอาจออกจากแอปหรือกราฟการนําทางปัจจุบันเนื่องจากไม่มีการเปลี่ยนแปลงเลย์เอาต์ให้เปลี่ยนกลับภายในบริบทปัจจุบัน ในเลย์เอาต์แบบแผงเดียว การกดปุ่มย้อนกลับจะข้ามการเปลี่ยนแปลงเนื้อหาภายในมุมมองรายละเอียดและกลับไปยังมุมมองรายการ เนื่องจากเป็นการเปลี่ยนแปลงเลย์เอาต์ที่ชัดเจน

ลองดูตัวอย่างต่อไปนี้

• หลายแผง: คุณกำลังดูอีเมล (รายการที่ 1) ในแผงรายละเอียด การคลิกอีเมลอื่น (รายการที่ 2) จะอัปเดตแผงรายละเอียด แต่แผงรายการและแผงรายละเอียดจะยังคงปรากฏอยู่ การกดกลับอาจทำให้คุณออกจากแอปหรือขั้นตอนการนำทางปัจจุบัน
• แผงเดียว: คุณดูรายการที่ 1 แล้วดูรายการที่ 2 การกดกลับจะนำคุณกลับไปยังแผงรายการอีเมลโดยตรง

ใช้ตัวเลือกนี้เมื่อต้องการให้ผู้ใช้รับรู้ถึงการเปลี่ยนเลย์เอาต์ที่แตกต่างกันด้วยการดำเนินการย้อนกลับแต่ละครั้ง

PopUntilContentChange

ลักษณะการทำงานนี้จะจัดลำดับความสำคัญของเนื้อหาที่แสดง หากคุณดูรายการที่ 1 แล้วดูรายการที่ 2 การกดปุ่มย้อนกลับจะเปลี่ยนกลับไปเป็นรายการที่ 1 ไม่ว่าเลย์เอาต์จะเป็นอย่างไร

ลองดูตัวอย่างต่อไปนี้

• หลายแผง: คุณดูรายการที่ 1 ในแผงรายละเอียด แล้วคลิกรายการที่ 2 ในรายการ แผงรายละเอียดจะอัปเดต การกดปุ่มย้อนกลับจะคืนค่าแผงรายละเอียดเป็นรายการที่ 1
• หน้าต่างเดียว: เนื้อหาจะเปลี่ยนกลับไปเป็นแบบเดิม

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

PopUntilCurrentDestinationChange

ลักษณะการทำงานนี้จะแสดง Back Stack จนกว่าปลายทางการนำทางปัจจุบันจะเปลี่ยนแปลง ซึ่งจะมีผลกับทั้งเลย์เอาต์แบบแผงเดียวและหลายแผงเท่าๆ กัน

ลองดูตัวอย่างต่อไปนี้

ไม่ว่าคุณจะอยู่ในเลย์เอาต์แบบแผงเดียวหรือหลายแผง การกดปุ่มย้อนกลับจะย้ายโฟกัสจากองค์ประกอบการนำทางที่ไฮไลต์ไปยังปลายทางก่อนหน้าเสมอ ในแอปอีเมลของเรา การดำเนินการนี้หมายความว่าภาพที่แสดงสถานะของแผงที่เลือกจะเปลี่ยนไป

ใช้ตัวเลือกนี้เมื่อการรักษาภาพที่ชัดเจนของการนําทางปัจจุบันเป็นสิ่งสําคัญต่อประสบการณ์ของผู้ใช้

PopLatest

ตัวเลือกนี้จะนำเฉพาะปลายทางล่าสุดออกจาก Backstack ใช้ตัวเลือกนี้สำหรับการนำทางย้อนกลับโดยไม่ข้ามสถานะกลาง

หลังจากทำตามขั้นตอนเหล่านี้แล้ว โค้ดของคุณควรมีลักษณะคล้ายกับโค้ดต่อไปนี้

NavigableListDetailPaneScaffold(
    navigator = navigator,
    listPane = {
        AnimatedPane {
            ListContent(
                words = sampleWords,
                selectionState = navigator.currentDestination?.contentKey?.let {
                    SelectionVisibilityState.ShowSelection(it)
                } ?: SelectionVisibilityState.NoSelection,
                onWordClick = { word ->
                    scope.launch {
                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, word)
                    }
                },
                animatedVisibilityScope = this@AnimatedPane,
                sharedTransitionScope = this@SharedTransitionLayout
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailContent(
                definedWord = navigator.currentDestination?.contentKey,
                animatedVisibilityScope = this@AnimatedPane,
                sharedTransitionScope = this@SharedTransitionLayout,
                onClosePane = {
                    scope.launch {
                        navigator.navigateBack(
                            backNavigationBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
                        )

                    }
                }
            )
        }
    }
ListDetailSample.kt