รายการรายละเอียดคือรูปแบบ UI ที่ประกอบด้วยเลย์เอาต์แบบ 2 แผง โดยที่แผงหนึ่ง แสดงรายชื่อรายการ และอีกช่องหนึ่งจะแสดงรายละเอียดของรายการที่เลือก จากรายการ
รูปแบบนี้จะมีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันที่ให้ข้อมูลเชิงลึก ข้อมูลเกี่ยวกับองค์ประกอบของคอลเล็กชันขนาดใหญ่ เช่น โปรแกรมรับส่งอีเมล ซึ่งมีรายชื่ออีเมลและเนื้อหาโดยละเอียดของข้อความอีเมลแต่ละฉบับ รายละเอียดรายการยังใช้สำหรับเส้นทางที่สำคัญน้อยกว่า เช่น การแบ่งแอป การตั้งค่าลงในรายการหมวดหมู่ พร้อมด้วยค่ากำหนดสำหรับแต่ละหมวดหมู่ใน แผงรายละเอียด
ใช้รูปแบบ UI กับ ListDetailPaneScaffold
ListDetailPaneScaffold
เป็น Composable ที่ช่วยให้การติดตั้งใช้งาน
รูปแบบรายละเอียดรายการในแอปของคุณ นั่งร้านรายละเอียดรายการสามารถมีได้สูงสุด
3 แผง ได้แก่ แผงรายการ แผงรายละเอียด และแผงเพิ่มเติมที่ไม่บังคับ
นั่งร้านจะช่วยจัดการการคำนวณพื้นที่หน้าจอ เมื่อขนาดหน้าจอเพียงพอ
ที่มีอยู่ แผงรายละเอียดจะแสดงอยู่ข้างแผงรายการ บนหน้าจอขนาดเล็ก
นั่งร้านจะสลับไปแสดงรายการหรือ
แผงรายละเอียดเต็มหน้าจอ
![แผงรายละเอียดแสดงอยู่ข้างหน้ารายการ](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=19&hl=th)
![หลังจากเลือกรายการแล้ว แผงรายละเอียดจะแสดงเต็มหน้าจอ](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=19&hl=th)
ประกาศทรัพยากร Dependency
ListDetailPaneScaffold
เป็นส่วนหนึ่งของ Material 3 แบบปรับอัตโนมัติ
คลัง
เพิ่มทรัพยากร Dependency ที่เกี่ยวข้อง 3 รายการต่อไปนี้ลงในไฟล์ build.gradle
ของไฟล์
แอปหรือโมดูล
Kotlin
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
- การนำทางแบบปรับเปลี่ยนได้ — Composable สำหรับการนำทางภายในและ ระหว่างแผง
การใช้งานพื้นฐาน
ใช้งาน ListDetailPaneScaffold
ดังนี้
ใช้ชั้นเรียนที่แสดงถึงเนื้อหาที่จะเลือก ชั้นเรียนนี้ ควรเป็น
Parcelable
เพื่อรองรับการบันทึก แล้วคืนค่ารายการที่เลือก ใช้ kotlin-parcelize Plugin เพื่อสร้างโค้ดให้คุณ@Parcelize class MyItem(val id: Int) : Parcelable
สร้าง
ThreePaneScaffoldNavigator
ด้วยrememberListDetailPaneScaffoldNavigator
และเพิ่มBackHandler
ช่วงเวลานี้ ตัวนำทางใช้สำหรับย้ายไปมาระหว่างรายการ รายละเอียด และหน้าต่างเพิ่มเติม โดย การประกาศประเภททั่วไป ตัวนำทางยังติดตามสถานะของ นั่งร้าน (ซึ่งก็คือMyItem
กำลังแสดง) เนื่องจากประเภทนี้คือ สามารถบันทึกและกู้คืนรัฐได้โดยตัวนำทางเพื่อ จัดการการเปลี่ยนแปลงการกำหนดค่าโดยอัตโนมัติBackHandler
รองรับการกลับโดยใช้ท่าทางสัมผัสการย้อนกลับของระบบ หรือ ลักษณะการทำงานที่คาดไว้ของปุ่มย้อนกลับสำหรับListDetailPaneScaffold
ขึ้นอยู่กับขนาดหน้าต่างและนั่งร้านปัจจุบัน หากListDetailPaneScaffold
รองรับการย้อนกลับด้วย สถานะปัจจุบันcanNavigateBack()
เท่ากับtrue
ซึ่งทำให้BackHandler
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
ส่ง
scaffoldState
จากnavigator
ไปยังListDetailPaneScaffold
ComposableListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
ระบุการติดตั้งใช้งานแผงรายการให้กับ
ListDetailPaneScaffold
ใช้AnimatedPane
เพื่อใช้ภาพเคลื่อนไหวที่แผงเริ่มต้นในระหว่างการนำทาง จากนั้นใช้ThreePaneScaffoldNavigator
เพื่อไปยังแผงรายละเอียดListDetailPaneScaffoldRole.Detail
และแสดงรายการที่ส่งผ่านListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) } ) } }, // ... )
รวมการใช้งานแผงรายละเอียดใน
ListDetailPaneScaffold
เมื่อการนำทางเสร็จสมบูรณ์currentDestination
จะมีแผง แอปของฉันนำทางไป ซึ่งรวมถึงเนื้อหาที่แสดงในแผง พร็อพเพอร์ตี้content
เป็นประเภทเดียวกับที่ระบุในการเรียกใช้ "จำ" เดิม (MyItem
ในตัวอย่างนี้) คุณจึงเข้าถึงพร็อพเพอร์ตี้สำหรับข้อมูลใดก็ได้ ที่คุณต้องแสดงListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
หลังจากที่คุณใช้ขั้นตอนข้างต้นแล้ว โค้ดของคุณควรมีลักษณะคล้ายกับด้านล่างนี้
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }, ) } }, detailPane = { AnimatedPane { // Show the detail pane content if selected item is available navigator.currentDestination?.content?.let { MyDetails(it) } } }, )