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

รายการรายละเอียดคือรูปแบบ 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
  • adaptive-navigation — Composables สําหรับไปยังส่วนต่างๆ ภายในและระหว่างแผง

การใช้งานพื้นฐาน

ใช้งาน ListDetailPaneScaffold ดังนี้

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

    @Parcelize
    class MyItem(val id: Int) : Parcelable

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

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

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

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

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

  5. รวมการใช้งานแผงรายละเอียดใน 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)
            }
        }
    },
)