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

รายการรายละเอียดคือรูปแบบ UI ที่ประกอบด้วยเลย์เอาต์แบบ 2 แผง โดยที่แผงหนึ่ง แสดงรายชื่อรายการ และอีกช่องหนึ่งจะแสดงรายละเอียดของรายการที่เลือก จากรายการ

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

ใช้รูปแบบ UI กับ ListDetailPaneScaffold

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

ประกาศทรัพยากร Dependency

ListDetailPaneScaffold เป็นส่วนหนึ่งของ Material 3 แบบปรับอัตโนมัติ คลัง

เพิ่มทรัพยากร Dependency ที่เกี่ยวข้อง 3 รายการต่อไปนี้ลงในไฟล์ build.gradle ของไฟล์ แอปหรือโมดูล

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 ดังนี้

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

   @Parcelize
   class MyItem(val id: Int) : Parcelable
   SampleListDetailPaneScaffold.kt

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

   val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
   
   BackHandler(navigator.canNavigateBack()) {
       navigator.navigateBack()
   }
   SampleListDetailPaneScaffold.kt

3. ส่ง scaffoldState จาก navigator ไปยังคอมโพสิเบิล ListDetailPaneScaffold

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       // ...
   )
   SampleListDetailPaneScaffold.kt

4. ระบุการติดตั้งใช้งานแผงรายการไปยัง 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)
                   }
               )
           }
       },
       // ...
   )
   SampleListDetailPaneScaffold.kt

5. รวมการใช้งานแผงรายละเอียดใน ListDetailPaneScaffold เมื่อการนําทางเสร็จสมบูรณ์แล้ว currentDestination จะมีแผงที่แอปไปยัง รวมถึงเนื้อหาที่แสดงในแผง พร็อพเพอร์ตี้ content เป็นประเภทเดียวกับที่ระบุในคําเรียก remember เดิม (MyItem ในตัวอย่างนี้) คุณจึงเข้าถึงพร็อพเพอร์ตี้เพื่อดูข้อมูลที่ต้องการแสดงได้ด้วย

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       listPane =
       // ...
       detailPane = {
           AnimatedPane {
               navigator.currentDestination?.content?.let {
                   MyDetails(it)
               }
           }
       },
   )
   SampleListDetailPaneScaffold.kt

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

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)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt