สร้างเลย์เอาต์แผงรองรับ

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

โปรดดูรายละเอียดเพิ่มเติมในหลักเกณฑ์ของแผงสนับสนุนสำหรับเนื้อหา 3

ใช้แผงสนับสนุนด้วย NavigableSupportingPaneScaffold

NavigableSupportingPaneScaffold คือคอมโพสิชันที่ช่วยลดความซับซ้อนในการใช้เลย์เอาต์แผงแบบรองรับใน Jetpack Compose โดยจะรวม SupportingPaneScaffold และเพิ่มการนําทางในตัวและการจัดการการกดย้อนกลับแบบคาดเดา

เฟรมเวิร์กแผงสนับสนุนรองรับแผงได้สูงสุด 3 แผง ดังนี้

• แผงหลัก: แสดงเนื้อหาหลัก
• แผงสนับสนุน: ให้บริบทหรือเครื่องมือเพิ่มเติมที่เกี่ยวข้องกับแผงหลัก
• แผงเพิ่มเติม (ไม่บังคับ): ใช้สำหรับเนื้อหาเสริมเมื่อจำเป็น

โครงสร้างพื้นฐานจะปรับตามขนาดหน้าต่าง ดังนี้

• ในหน้าต่างขนาดใหญ่ แผงหลักและแผงสนับสนุนจะปรากฏเคียงข้างกัน

• ในหน้าต่างขนาดเล็ก ผู้ใช้จะเห็นเพียงแผงเดียวในแต่ละครั้ง โดยระบบจะสลับแผงไปเรื่อยๆ ตามการไปยังส่วนต่างๆ

  

เพิ่มทรัพยากร Dependency

NavigableSupportingPaneScaffold เป็นส่วนหนึ่งของไลบรารีเลย์เอาต์แบบปรับเปลี่ยนได้ของ Material 3

เพิ่ม 3 รายการต่อไปนี้ซึ่งเป็น Dependency ที่เกี่ยวข้องลงในไฟล์ 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'

• ปรับเปลี่ยนได้: องค์ประกอบพื้นฐานระดับล่าง เช่น HingeInfo และ Posture
• adaptive-layout: เลย์เอาต์แบบปรับขนาดได้ เช่น ListDetailPaneScaffold และ SupportingPaneScaffold
• adaptive-navigation: คอมโพสิเบิลสําหรับไปยังส่วนต่างๆ ภายในและระหว่างแผง รวมถึงเลย์เอาต์แบบปรับเปลี่ยนได้ซึ่งรองรับการไปยังส่วนต่างๆ โดยค่าเริ่มต้น เช่น NavigableListDetailPaneScaffold และ NavigableSupportingPaneScaffold

ตรวจสอบว่าโปรเจ็กต์ของคุณมี compose-material3-adaptive เวอร์ชัน 1.1.0-beta1 ขึ้นไป

เลือกใช้ท่าทางสัมผัสการย้อนกลับที่คาดการณ์ได้

หากต้องการเปิดใช้ภาพเคลื่อนไหวย้อนกลับแบบคาดเดาใน Android 15 หรือต่ำกว่า คุณต้องเลือกใช้เพื่อรองรับท่าทางสัมผัสย้อนกลับแบบคาดเดา หากต้องการเลือกใช้ ให้เพิ่ม ลงในแท็ก <application> [หรือ ลงในแท็ก <application> หรือ<activity> แต่ละแท็กภายในไฟล์ AndroidManifest.xmlandroid:enableOnBackInvokedCallback="true"android:enableOnBackInvokedCallback="true"

เมื่อแอปกำหนดเป้าหมายเป็น Android 16 (API ระดับ 36) ขึ้นไป ระบบจะเปิดใช้การกดย้อนกลับแบบคาดการณ์โดยค่าเริ่มต้น

สร้างตัวนำทาง

ในหน้าต่างขนาดเล็ก ระบบจะแสดงแผงเพียงแผงเดียวในแต่ละครั้ง ดังนั้นให้ใช้แป้น ThreePaneScaffoldNavigator เพื่อไปยังแผงต่างๆ สร้างอินสแตนซ์ของ Navigator ด้วย rememberSupportingPaneScaffoldNavigator

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()
SampleSupportingPaneScaffold.kt

ส่ง Navigator ไปยังสแคฟเฟิลด์

โครงสร้างย่อยต้องใช้ ThreePaneScaffoldNavigator ซึ่งเป็นอินเทอร์เฟซที่แสดงสถานะของโครงสร้างย่อย ThreePaneScaffoldValue และ PaneScaffoldDirective

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

แผงหลักและแผงสนับสนุนคือคอมโพสิเบิลที่มีเนื้อหาของคุณ ใช้ AnimatedPane เพื่อใช้ภาพเคลื่อนไหวของแผงเริ่มต้นระหว่างการไปยังส่วนต่างๆ ใช้ค่าสแคฟเฟิลด์เพื่อตรวจสอบว่าแผงสนับสนุนซ่อนอยู่หรือไม่ หากซ่อนอยู่ ให้แสดงปุ่มที่เรียกใช้ navigateTo(SupportingPaneScaffoldRole.Supporting) เพื่อแสดงแผงสนับสนุน

ต่อไปนี้คือการใช้งานสคาฟเฟิลด์ที่สมบูรณ์

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        AnimatedPane(
            modifier = Modifier
                .safeContentPadding()
                .background(Color.Red)
        ) {
            if (scaffoldNavigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier
                        .wrapContentSize(),
                    onClick = {
                        scope.launch {
                            scaffoldNavigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                        }
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            Text("Supporting pane")
        }
    }
)
SampleSupportingPaneScaffold.kt

คอมโพเนนต์ของแผง "ดึงข้อมูล"

แยกแต่ละแผงของ SupportingPaneScaffold ออกเป็นคอมโพสิเบิลของตัวเองเพื่อให้นํากลับมาใช้ซ้ำและทดสอบได้ ใช้ ThreePaneScaffoldScope เพื่อเข้าถึง AnimatedPane หากต้องการภาพเคลื่อนไหวเริ่มต้น

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(
        modifier = modifier.safeContentPadding()
    ) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}
SampleSupportingPaneScaffold.kt

การสกัดแผงออกเป็นคอมโพสิเบิลช่วยให้การใช้ SupportingPaneScaffold ง่ายขึ้น (เปรียบเทียบกับการใช้งานสแคฟเฟิลด์ที่สมบูรณ์ในส่วนก่อนหน้า)

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

หากต้องการควบคุมแง่มุมที่เฉพาะเจาะจงของสคาล์ฟเฟอร์ได้มากขึ้น ให้ลองใช้ SupportingPaneScaffold แทน NavigableSupportingPaneScaffold ซึ่งยอมรับ PaneScaffoldDirective และ ThreePaneScaffoldValue หรือ ThreePaneScaffoldState แยกกัน ความยืดหยุ่นนี้ช่วยให้คุณใช้ตรรกะที่กำหนดเองสำหรับระยะห่างของแผง และกำหนดจำนวนแผงที่ควรแสดงพร้อมกันได้ นอกจากนี้ คุณยังเปิดใช้การรองรับการกดย้อนกลับแบบคาดการณ์ได้โดยเพิ่ม ThreePaneScaffoldPredictiveBackHandler

เพิ่ม ThreePaneScaffoldPredictiveBackHandler

แนบตัวแฮนเดิลการกดย้อนกลับแบบคาดเดาที่ใช้อินสแตนซ์ของเครื่องมือนำทางสแคฟเฟิลด์และระบุ backBehavior ซึ่งจะกําหนดวิธีแสดงปลายทางจากกองซ้อนที่ซ้อนกันอยู่เบื้องหลังระหว่างการนําทางกลับ จากนั้นส่ง scaffoldDirective และ scaffoldState ไปยัง SupportingPaneScaffold ใช้การโอเวอร์โหลดที่รับ ThreePaneScaffoldState โดยส่ง scaffoldNavigator.scaffoldState

กำหนดแผงหลักและแผงสนับสนุนภายใน SupportingPaneScaffold ใช้ AnimatedPane สำหรับภาพเคลื่อนไหวของแผงเริ่มต้น

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

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

ThreePaneScaffoldPredictiveBackHandler(
    navigator = scaffoldNavigator,
    backBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt