פריסה של קונטיינרים

Jetpack Compose מספק כמה קונטיינרים של פריסות שעוזרים לכם לבנות ולסדר את רכיבי ממשק המשתמש. רכיבי פריסה בסיסיים כמו Row ו-Column מטפלים בסידורים פשוטים, אבל אפליקציות רבות דורשות פתרונות גמישים יותר למאגרים, שמתאימים את עצמם לשינויים בגודל המסך ולגידול בנתוני המשתמשים.

אלה מאגרי הפריסה:

  • רשימות ורשתות עם טעינה מדורגת: רכיבים כמו LazyColumn, ‏ LazyRow ו-LazyVerticalGrid שמציגים ביעילות קבוצות נתונים גדולות או בגודל דינמי, על ידי יצירה ופריסה של פריטים שגלויים כרגע באזור התצוגה.
  • כלי לדפדוף: קונטיינרים כמו HorizontalPager ו-VerticalPager שמאפשרים למשתמשים להחליק או לגלול בין דפי תוכן.
  • פריסות זרימה: קונטיינרים רספונסיביים חד-ממדיים (FlowRow ו-FlowColumn) שמעבירים באופן אוטומטי פריטים חורגים לשורה או לעמודה הבאה כשנגמר המקום.
  • רשת: מבנה גמיש ודו-ממדי שמציג פריטים בפריסות של כמה עמודות או כמה שורות, שמתאימות את עצמן לגודל של מאגר התגים.
  • ‫FlexBox: מאגר גמיש בהשראת CSS Flexbox, שמאפשר שליטה פרטנית על האופן שבו פריטים מתעטפים, גדלים, מתכווצים ומתיישרים לאורך הצירים הראשיים והצולבים כדי למלא את המקום הפנוי.

בחירת מאגר הפריסה הנכון

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

בטבלה הבאה מפורטות היכולות של כל אחד ממכלי הפריסה החד-ממדיים ב-Compose:

מאגר

העברת פריטים לשורות חדשות

הגדלה לפי פריט

התכווצות לפי פריט

גודל התחלתי לכל פריט

הפריטים גדלים כדי למלא את השטח הזמין בכמה שורות

שינוי הסדר של הפריטים

טעינה מדורגת

מתאים במיוחד ל:

שורה / עמודה

❌

✅ (דרך weight) שורה אחת בלבד

❌

❌

❌

❌

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

FlowRow / FlowColumn

✅

מוגבלת

❌

❌

חלקי

❌

❌
  • הוחלפה על ידי FlexBox.

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

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

FlexBox

✅

✅

✅

✅

✅

✅

❌
  • פריסות שדורשות יכולות התאמה, כמו ציון גודל ראשוני, הגדלה או הקטנה דינמית של פריטים (grow/shrink), שינוי סדר חזותי (order) או יישור צולב ברמת הפריט (alignSelf).
  • סידור פריטים בגדלים שונים.

בטבלה הבאה מפורטות היכולות של Grid ושל רכיבים דומים אחרים:

מאגר

התאמה קפדנית בדו-ממד

פריסה של פריט (עמודות)

פריסה של פריט (שורות)

טעינה מדורגת

מתאים במיוחד ל:

רשת

✅

✅ (באמצעות GridArea)

✅

❌
  • פריסות דו-ממדיות שבהן כל הפריטים נמצאים במסך וצריך ליישר אותם במפורש בצורה אופקית ואנכית.
  • שינוי הפריסה בהתאם לגודל המסך.

LazyVerticalGrid

✅

✅ (באמצעות span)

❌

✅
  • פידים עם גלילה אנכית וקטלוגים גדולים שצריך להציג בעמודות.

LazyStaggeredGrid

❌ (רק ב-1D)

חלקית (רק בפריסה מלאה)

❌

✅
  • גלילה בפידים עם פריטים בגבהים שונים.

LazyHorizontalGrid

✅

❌

✅

✅
  • קרוסלות עם גלילה אופקית או נתונים עם עימוד בכמה שורות.

שילוב של שורות ועמודות

❌

❌

❌

❌
  • הרכבה פשוטה של רכיבים, כמו הצבת תווית טקסט לצד סמל.
הקודם
רשימת המשנים
הבא
רשימות ורשתות עצלות