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

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

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'

• ปรับเปลี่ยนได้: องค์ประกอบพื้นฐานระดับล่าง เช่น HingeInfo และ Posture
• adaptive-layout: เลย์เอาต์แบบปรับขนาดได้ เช่น ListDetailPaneScaffold และ SupportingPaneScaffold
• adaptive-navigation: คอมโพสิเบิลสําหรับไปยังส่วนต่างๆ ภายในและระหว่างแผง รวมถึงเลย์เอาต์แบบปรับเปลี่ยนได้ซึ่งรองรับการไปยังส่วนต่างๆ โดยค่าเริ่มต้น เช่น 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

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

1. ส่ง Navigator ไปยังคอมโพสิชัน NavigableListDetailPaneScaffold

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

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

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

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

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

PopLatest

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

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

val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
val scope = rememberCoroutineScope()

NavigableListDetailPaneScaffold(
    navigator = scaffoldNavigator,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    scope.launch {
                        scaffoldNavigator.navigateTo(
                            ListDetailPaneScaffoldRole.Detail,
                            item
                        )
                    }
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            // Show the detail pane content if selected item is available
            scaffoldNavigator.currentDestination?.contentKey?.let {
                MyDetails(it)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt