รายการรายละเอียดคือรูปแบบ UI ที่ประกอบด้วยเลย์เอาต์แบบ 2 แผง โดยที่แผงหนึ่ง แสดงรายชื่อรายการ และอีกช่องหนึ่งจะแสดงรายละเอียดของรายการที่เลือก จากรายการ
รูปแบบนี้มีประโยชน์อย่างยิ่งสําหรับแอปพลิเคชันที่ให้ข้อมูลเชิงลึกเกี่ยวกับองค์ประกอบของคอลเล็กชันขนาดใหญ่ เช่น โปรแกรมรับส่งอีเมลที่มีรายการอีเมลและเนื้อหาโดยละเอียดของข้อความอีเมลแต่ละรายการ รายละเอียดรายการยังใช้สำหรับเส้นทางที่สำคัญน้อยกว่า เช่น การแบ่งแอป การตั้งค่าลงในรายการหมวดหมู่ พร้อมด้วยค่ากำหนดสำหรับแต่ละหมวดหมู่ใน แผงรายละเอียด
ใช้รูปแบบ UI กับ ListDetailPaneScaffold
ListDetailPaneScaffold
เป็น Composable ที่ช่วยให้การติดตั้งใช้งาน
รูปแบบรายละเอียดรายการในแอปของคุณ นั่งร้านรายละเอียดรายการสามารถมีได้สูงสุด
3 แผง ได้แก่ แผงรายการ แผงรายละเอียด และแผงเพิ่มเติมที่ไม่บังคับ
นั่งร้านจะช่วยจัดการการคำนวณพื้นที่หน้าจอ เมื่อขนาดหน้าจอเพียงพอ
ที่มีอยู่ แผงรายละเอียดจะแสดงอยู่ข้างแผงรายการ ในหน้าจอขนาดเล็ก โครงสร้างพื้นฐานจะเปลี่ยนเป็นการแสดงรายการหรือแผงรายละเอียดแบบเต็มหน้าจอโดยอัตโนมัติ


ประกาศทรัพยากร 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
- adaptive-navigation — Composables สําหรับไปยังส่วนต่างๆ ภายในและระหว่างแผง
การใช้งานพื้นฐาน
ใช้งาน 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
ListDetailPaneScaffold( 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
เป็นประเภทเดียวกับที่ระบุในคําเรียก remember เดิม (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) } } }, )