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

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

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

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

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

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

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

בחלונות קטנים, רק חלונית אחת מוצגת בכל פעם. לכן צריך להשתמש 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