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

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

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

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

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

วันที่ แผงรายละเอียดแสดงอยู่ข้างหน้ารายการ
รูปที่ 1 เมื่อมีขนาดหน้าจอเพียงพอ รายละเอียด จะปรากฏควบคู่ไปกับแผงรายการ
หลังจากเลือกรายการแล้ว แผงรายละเอียดจะแสดงเต็มหน้าจอ
รูปที่ 2 เมื่อมีการจำกัดขนาดหน้าจอ แผงรายละเอียด (เนื่องจากมีการเลือกรายการ) จะครองพื้นที่ทั้งหมด

ประกาศทรัพยากร 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 ดังนี้

  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 Composable

    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 เป็นประเภทเดียวกับที่ระบุในการเรียกใช้ "จำ" เดิม (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

ก่อนหน้า
สร้างการนำทางแบบปรับอัตโนมัติ
ถัดไป
สร้างเลย์เอาต์แผงรองรับ