בניית פריסה של רשימה ופירוט

רשימה-פרטים היא תבנית של ממשק משתמש שמורכבת מפריסת שתי חלוניות, שבה חלונית אחת מציג רשימה של פריטים וחלונית אחרת מציגה את הפרטים של הפריטים שנבחרו מהרשימה.

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

הטמעה של דפוס ממשק משתמש עם ListDetailPaneScaffold

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

איור 1. אם מספיק גודל מסך זמין, הפרטים תוצג לצד חלונית הרשימה.

איור 2. כאשר גודל המסך מוגבל, חלונית הפרטים (מכיוון שפריט נבחר) משתלט על כל המרחב.

הצהרה על יחסי תלות

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

הערה: The Material3 adaptive, adaptive-layout ו-adaptive-navigation ספריות הן בגרסת בטא.

שימוש בסיסי

מטמיעים את ListDetailPaneScaffold באופן הבא:

1. משתמשים במחלקה שמייצגת את התוכן שרוצים לבחור. הכיתה הזו צריך להיות Parcelable כדי לתמוך בשמירה ושחזור של פריט הרשימה שנבחר. משתמשים במאפיין kotlin-parcelize בפלאגין כדי ליצור את הקוד בשבילכם.

   @Parcelize
   class MyItem(val id: Int) : Parcelable
   SampleListDetailPaneScaffold.kt

2. יצירת ThreePaneScaffoldNavigator באמצעות rememberListDetailPaneScaffoldNavigator ולהוסיף BackHandler. הזה כלי הניווט משמש למעבר בין הרשימה, הפרטים וחלוניות נוספות. על ידי כאשר הוא מצהיר על סוג כללי, הניווט גם עוקב אחר מצב לגרד (כלומר, שמוצג על ידי MyItem). מאחר שסוג זה parcelable, הניווט יכול לשמור ולשחזר את המצב יטפלו אוטומטית בשינויי הגדרות אישיות. BackHandler מספק תמיכה בניווט חזרה באמצעות תנועת החזרה של המערכת, או לחצן. ההתנהגות הצפויה של לחצן 'הקודם' עבור הערך ListDetailPaneScaffold תלוי בגודל החלון וברמה הנוכחית עם ערך מסוים. אם ListDetailPaneScaffold יכול לתמוך בחזרה עם המצב הנוכחי, canNavigateBack() הוא true, מה שמאפשר BackHandler

   val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
   
   BackHandler(navigator.canNavigateBack()) {
       navigator.navigateBack()
   }
   SampleListDetailPaneScaffold.kt

3. מעבירים את scaffoldState מ-navigator אל תוכן קומפוזבילי ListDetailPaneScaffold.

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       // ...
   )
   SampleListDetailPaneScaffold.kt

4. צריך לספק את ההטמעה של חלונית הרשימה בListDetailPaneScaffold. כדאי להשתמש AnimatedPane כדי להחיל את אנימציית ברירת המחדל בחלונית במהלך הניווט. ואז משתמשים ThreePaneScaffoldNavigator כדי לנווט לחלונית הפרטים, ListDetailPaneScaffoldRole.Detail, ולהציג את הפריט שהועבר.

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       listPane = {
           AnimatedPane {
               MyList(
                   onItemClick = { item ->
                       // Navigate to the detail pane with the passed item
                       navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                   }
               )
           }
       },
       // ...
   )
   SampleListDetailPaneScaffold.kt

5. יש לכלול את ההטמעה של חלונית הפרטים ב-ListDetailPaneScaffold. בסיום הניווט, currentDestination מכיל את החלונית האפליקציה עברה אל, כולל התוכן שמוצג בחלונית. המאפיין content הוא מאותו הסוג שצוין בקריאה המקורית לזכירת נתונים (MyItem בדוגמה הזו), כך שאפשר גם לגשת לנכס כדי לגשת לנתונים שצריך להציג,

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       listPane =
       // ...
       detailPane = {
           AnimatedPane {
               navigator.currentDestination?.content?.let {
                   MyDetails(it)
               }
           }
       },
   )
   SampleListDetailPaneScaffold.kt

אחרי שתבצעו את השלבים שלמעלה, הקוד אמור להיראות כך:

val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

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

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            // Show the detail pane content if selected item is available
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt