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

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

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

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

איור 1. פריסת חלונית תומכת.

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

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")

Groovy

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• מותאם – אבני בניין ברמה נמוכה, כמו HingeInfo וגם Posture
• פריסה מותאמת – הפריסות המותאמות אישית, כמו 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