רשימה-פרטים היא תבנית של ממשק משתמש שמורכבת מפריסת שתי חלוניות, שבה חלונית אחת מציג רשימה של פריטים וחלונית אחרת מציגה את הפרטים של הפריטים שנבחרו מהרשימה.
הדפוס שימושי במיוחד לאפליקציות שמספקות ניתוח מעמיק מידע על אלמנטים של אוספים גדולים, לדוגמה, לקוח אימייל שכולל רשימה של הודעות אימייל ואת התוכן המפורט של כל הודעת אימייל. אפשר להשתמש בפרטי רשימה גם לנתיבים פחות חשובים, כמו חלוקת האפליקציה את ההעדפות שלך לרשימה של קטגוריות, כולל ההעדפות לכל קטגוריה חלונית הפרטים.
הטמעה של דפוס ממשק משתמש עם ListDetailPaneScaffold
ListDetailPaneScaffold
הוא תוכן קומפוזבילי שמפשט את ההטמעה של
את דפוס הרשימה והפרטים באפליקציה. פיסת מידע של רשימה יכולה להכיל עד
שלוש חלוניות: חלונית רשימה, חלונית פרטים וחלונית נוספת אופציונלית.
"פילוט" מטפל בחישובים של שטח המסך. כשגודל המסך מספיק
זמינה, חלונית הפרטים מוצגת לצד חלונית הרשימה. במסך קטן
הגדלים האלה, הם עוברים באופן אוטומטי להצגת הרשימה
חלונית הפרטים במסך מלא.
הצהרה על יחסי תלות
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")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- מותאם – אבני בניין ברמה נמוכה, כמו
HingeInfo
וגםPosture
- פריסה מותאמת – פריסות מותאמות כמו
ListDetailPaneScaffold
והקבוצהSupportingPaneScaffold
- ניווט מותאם – תכנים קומפוזביליים לניווט בתוך בין חלוניות
שימוש בסיסי
מטמיעים את ListDetailPaneScaffold
באופן הבא:
משתמשים במחלקה שמייצגת את התוכן שרוצים לבחור. הכיתה הזו צריך להיות
Parcelable
כדי לתמוך בשמירה ושחזור של פריט הרשימה שנבחר. משתמשים במאפיין kotlin-parcelize בפלאגין כדי ליצור את הקוד בשבילכם.@Parcelize class MyItem(val id: Int) : Parcelable
יצירת
ThreePaneScaffoldNavigator
באמצעותrememberListDetailPaneScaffoldNavigator
ומוסיפיםBackHandler
. הזה כלי הניווט משמש למעבר בין הרשימה, הפרטים וחלוניות נוספות. על ידי כאשר הוא מצהיר על סוג כללי, הניווט גם עוקב אחר מצב לגרד (כלומר, שמוצג על ידיMyItem
). מאחר שסוג זה parcelable, הניווט יכול לשמור ולשחזר את המצב כדי יטפלו אוטומטית בשינויי הגדרות אישיות.BackHandler
מספק תמיכה בניווט חזרה באמצעות תנועת החזרה של המערכת, או לחצן. ההתנהגות הצפויה של לחצן 'הקודם' עבור הערךListDetailPaneScaffold
תלוי בגודל החלון וברמה הנוכחית עם ערך מסוים. אםListDetailPaneScaffold
יכול לתמוך בחזרה עם המצב הנוכחי,canNavigateBack()
הואtrue
, מה שמאפשרBackHandler
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
מעבירים את
scaffoldState
מ-navigator
אל תוכן קומפוזביליListDetailPaneScaffold
.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
צריך לספק את ההטמעה של חלונית הרשימה ב
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) } ) } }, // ... )
יש לכלול את ההטמעה של חלונית הפרטים ב-
ListDetailPaneScaffold
. בסיום הניווט,currentDestination
מכיל את החלונית האפליקציה עברה אל, כולל התוכן שמוצג בחלונית. המאפייןcontent
הוא מאותו הסוג שצוין בקריאה המקורית לזכירת נתונים (MyItem
בדוגמה הזו), כך שאפשר גם לגשת לנכס כדי לגשת לנתונים שצריך להציג,ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
אחרי שתבצעו את השלבים שלמעלה, הקוד אמור להיראות כך:
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) } } }, )