פיתוח פריסת חלונית תומכת

הפריסה הקנונית של החלונית התומכת מתמקדת בתוכן הראשי של האפליקציה וגם מציגה תוכן רלוונטי רלוונטי. לדוגמה, בחלונית התוכן הראשית מוצג מידע על סרט חדש, ובחלונית התומכת מוצגת רשימה של סרטים אחרים בנושא דומה או עם אותו במאי או שחקנים. מידע נוסף על הפריסה הקנונית של חלונית התמיכה זמין בהנחיות לחלונית התמיכה של Material 3.

הטמעת חלונית תומכת

SupportingPaneScaffold מורכב עד שלוש חלוניות: חלונית ראשית, חלונית תומכת וחלונית נוספת אופציונלית. התשתית מבצעת את כל החישובים של הקצאת שטח החלון לשלושת החלונות. במסכים גדולים, הפיגון מציג את החלונית הראשית עם החלונית התומכת בצד. במסכים קטנים, במסגרת ה-scaffold מוצגת בחלונית הראשית או בחלונית התומכת במסך מלא.

הוספת יחסי תלות

SupportingPaneScaffold הוא חלק מספריית הפריסות המותאמות של Material 3.

מוסיפים את שלושת יחסי התלות הבאים לקובץ 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 – הפריסות המותאמות, כמו SupportingPaneScaffold
• adaptive-navigation – רכיבים מורכבים לניווט בתוך חלוניות ובין חלוניות

יצירת כלי ניווט ופיסול

בחלונות קטנים מוצגת רק חלונית אחת בכל פעם, לכן כדאי להשתמש ב-ThreePaneScaffoldNavigator כדי לעבור לחלוניות ומהן. יוצרים מכונה של כלי הניווט באמצעות rememberSupportingPaneScaffoldNavigator. כדי לטפל בתנועות חזרה, משתמשים ב-BackHandler שבודק את canNavigateBack() וקורא ל-navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

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

למבנה העזר נדרש רכיב PaneScaffoldDirective, שמגדיר את אופן הפיצול של המסך ואת המרווחים, ורכיב ThreePaneScaffoldValue שמציג את המצב הנוכחי של החלונות (למשל, אם הם מורחבים או מוסתרים). כדי להשתמש בהתנהגות ברירת המחדל, משתמשים במקשי הניווט scaffoldDirective ו-scaffoldValue בהתאמה:

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 לרכיבים משלהם כדי שאפשר יהיה להשתמש בהם שוב ולבדוק אותם. משתמשים ב-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