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

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

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

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

เนื้อหาหลักกินพื้นที่ส่วนใหญ่ของจอแสดงผลโดยมีเนื้อหาสนับสนุนอยู่ข้างๆ
รูปที่ 1 เลย์เอาต์แผงสนับสนุน

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

SupportingPaneScaffold เป็นส่วนหนึ่งของ ไลบรารีเลย์เอาต์แบบปรับได้ของ 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")

Groovy

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 — เลย์เอาต์แบบปรับอัตโนมัติ เช่น 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

แผงหลักและแผงสนับสนุนคือ Composable ที่มีเนื้อหาของคุณ ใช้ 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

แยกแผง Composable

แยกแต่ละแผงของ SupportingPaneScaffold ออกเป็นคอมโพสิเบิลของตัวเองเพื่อให้นํากลับมาใช้ซ้ำและทดสอบได้ ใช้ 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

การแยกแผงเป็น Composable จะช่วยลดความซับซ้อนในการใช้งาน 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

ก่อนหน้า
สร้างเลย์เอาต์รายละเอียดรายการ
ถัดไป
การจัดแนวเส้น