รูปแบบ Canonical ของแผงที่รองรับจะเน้นความสนใจของผู้ใช้ไปที่แอปหลัก และแสดงเนื้อหาสนับสนุนที่เกี่ยวข้องด้วย ตัวอย่างเช่น พารามิเตอร์หลัก แผงเนื้อหาอาจแสดงข้อมูลเกี่ยวกับภาพยนตร์ล่าสุด ขณะที่ช่อง แผงแสดงรายการภาพยนตร์อื่นที่มีธีมคล้ายกันหรือเหมือนกัน ผู้กำกับหรือนักแสดงนำชาย ดูข้อมูลเพิ่มเติมเกี่ยวกับแผงสนับสนุน รูปแบบ Canonical โปรดดู หลักเกณฑ์ของแผงสนับสนุน Material 3
ใช้แผงสนับสนุน
SupportingPaneScaffold
ประกอบด้วยองค์ประกอบได้สูงสุด 3 รายการ
แผง: แผงหลัก แผงสนับสนุน และแผงเพิ่มเติมที่ไม่บังคับ นั่งร้าน
จะจัดการการคำนวณทั้งหมดสำหรับการจัดสรรพื้นที่หน้าต่างให้กับช่องทั้ง 3 ช่อง เปิด
ซึ่งมีหน้าจอขนาดใหญ่ นั่งร้านจะแสดงแผงหลักโดยที่มีแผงรองรับเปิดอยู่
ด้านข้าง ในหน้าจอขนาดเล็ก นั่งร้านจะแสดงองค์ประกอบหลักหรือส่วนสนับสนุน
ขยายเต็มหน้าจอ
![เนื้อหาหลักกินพื้นที่ส่วนใหญ่ของจอแสดงผลโดยมีเนื้อหาสนับสนุนอยู่ข้างๆ](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=5&hl=th)
เพิ่มทรัพยากร Dependency
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")
ดึงดูด
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() }
นั่งร้านต้องใช้ PaneScaffoldDirective
ซึ่ง
ควบคุมวิธีแบ่งหน้าจอและระยะห่างที่จะใช้
ThreePaneScaffoldValue
ซึ่งแสดงค่าปัจจุบัน
สถานะของบานหน้าต่าง (เช่น ขยายหรือซ่อนไว้) สำหรับค่าเริ่มต้น
ให้ใช้scaffoldDirective
ของเครื่องมือนำทาง และ
scaffoldValue
ตามลำดับ
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
แผงหลักและแผงสนับสนุนคือ 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") } }, )
แยกแผง Composable
แยกแผงของ 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") } }
การแยกแผงเป็น 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() }, )