הפריסה הקנונית של החלונית התומכת מתמקדת בתוכן הראשי של האפליקציה תוכן וגם להציג תוכן רלוונטי רלוונטי. לדוגמה, מילת המפתח הראשית חלונית תוכן עשויה להציג מידע על סרט שפורסם לאחרונה, בזמן בחלונית תוצג רשימה של סרטים אחרים באותו נושא או באותו נושא. במאים או שחקנים מככבים. מידע נוסף על החלונית התומכת בפריסה הקנונית, הנחיות לחלונית תומכת של חומר 3.
הטמעת חלונית תומכת
SupportingPaneScaffold
כולל עד 3 אפשרויות
חלוניות: חלונית ראשית, חלונית תומכת וחלונית נוספת אופציונלית. הגז
מטפל בכל החישובים להקצאת שטח חלון לשלוש החלוניות. במצב מופעל
עם מסכים גדולים, העמוד מציג את החלונית הראשית כשהחלונית התומכת מופעלת
בצד. במסכים קטנים, הפי יכול מציג את
חלונית מלאה במסך.
![תוכן ראשי תופס את רוב שטח התצוגה, ולצידו תוכן תומך.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=1&hl=he)
הוספת יחסי תלות
SupportingPaneScaffold
הוא חלק מ
ספריית פריסה מותאמת של חומר 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'
- מותאם – אבני בניין ברמה נמוכה, כמו
HingeInfo
וגםPosture
- פריסה מותאמת – הפריסות המותאמות אישית, כמו
SupportingPaneScaffold
- ניווט מותאם – תכנים קומפוזביליים לניווט בתוך בין חלוניות
יצירת כלי ניווט ופיסול
בחלונות קטנים, רק חלונית אחת מוצגת בכל פעם. לכן צריך להשתמש
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 = { /*...*/ }, )
החלונית הראשית והחלונית התומכת הן תכנים קומפוזביליים שמכילים את התוכן שלכם. כדאי להשתמש
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") } }, )
חלונית לחילוץ תכנים קומפוזביליים
צריך לחלץ חלוניות ספציפיות של 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") } }
חילוץ החלוניות לתכנים קומפוזביליים מפשט את השימוש
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() }, )