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

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

ใช้แผงสนับสนุน

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

รูปที่ 1 เลย์เอาต์แผงที่รองรับ

เพิ่มการพึ่งพา

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

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

KotlinGroovy

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 — เลย์เอาต์แบบปรับขนาดได้ เช่น SupportingPaneScaffold
• การนำทางแบบปรับเปลี่ยนได้ — Composable สำหรับการนำทางภายในและระหว่างบานหน้าต่าง

สร้างเครื่องมือนำทางและโครงสร้างพื้นฐาน

ในหน้าต่างขนาดเล็ก ระบบจะแสดงแผงเพียงแผงเดียวในแต่ละครั้ง ดังนั้นให้ใช้แป้น ThreePaneScaffoldNavigator เพื่อไปยังแผงต่างๆ สร้างอินสแตนซ์ของตัวนำทางด้วย rememberSupportingPaneScaffoldNavigator หากต้องการจัดการท่าทางสัมผัส "กลับ" ให้ใช้ BackHandler ที่ตรวจสอบ canNavigateBack() และเรียกใช้ navigateBack()

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
SampleSupportingPaneScaffold.kt

โครงสร้างพื้นฐานต้องมี PaneScaffoldDirective ซึ่งควบคุมวิธีแบ่งหน้าจอและระยะห่างที่จะใช้ และ ThreePaneScaffoldValue ซึ่งระบุสถานะปัจจุบันของแผง (เช่น ขยายหรือซ่อนอยู่) สําหรับลักษณะการทํางานเริ่มต้น ให้ใช้ scaffoldDirective และ scaffoldValue ของ Navigator ตามลําดับ

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

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

ต่อไปนี้คือการใช้งานโครงข่ายอย่างเต็มรูปแบบ

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Main pane content
            if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier.wrapContentSize(),
                    onClick = {
                        navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Supporting pane content
            Text("Supporting pane")
        }
    },
)
SampleSupportingPaneScaffold.kt

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

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

@Composable
fun ThreePaneScaffoldScope.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")
        }
    }
}

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

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

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

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