Grid הוא Jetpack Compose API שמאפשר להטמיע פריסה דו-ממדית בצורה גמישה.
באמצעות ה-API הזה, אפשר להציג פריטים בפריסות של כמה עמודות או כמה שורות שמתאימות לגודל הקונטיינר הזמין.
Grid.
מה ההבדל בין Grid לבין רכיבים דומים שניתן לשלב?
ב-Compose כבר יש רכיבים דומים, כמו LazyVerticalGrid.
הרכיבים האלה מיועדים בעיקר להצגה חזותית של קבוצות נתונים גדולות והומוגניות – לדוגמה, הצגת קטלוג תוכן באפליקציית סטרימינג של וידאו. הרכיבים האלה לא מיועדים לפריסה המבנית של מסך או של רכיב מורכב.
אפשר גם להטמיע פריסה דו-ממדית על ידי שילוב של כמה רכיבים קומפוזביליים מסוג Row ו-Column.
עם זאת, לגישה הזו יש כמה חסרונות, כמו היררכיות עמוקות וקשיים בהתאמה.
בטבלה הבאה מפורטים הפריסות שמתאימות לכל API:
| רכיב | מטרה |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
הצגה חזותית של קבוצות נתונים גדולות והומוגניות שדורשות טעינה מדורגת. |
Row, Column, FlexBox |
פריסה חד-ממדית |
Grid |
פריסה דו-ממדית |
הסברים על המונחים
כדי להבין איך Grid פועל, כדאי להכיר את המונחים הבאים.
קו רשת
רשת מורכבת מקווים אופקיים ואנכיים. אם ברשת יש שלוש שורות, יש בה ארבעה קווים אופקיים, כולל הקו שאחרי השורה האחרונה. בתמונה הבאה, כל קו מקווקו מייצג קו רשת:
מסלול רשת
מסלול רשת הוא המרווח בין שני קווי רשת. מסלול שורה נמצא בין שני קווים אופקיים, ומסלול עמודה נמצא בין שני קווים אנכיים. כדי להגדיר את הגודל של המסלולים האלה, מקצים להם גודל כשיוצרים את הרשת.
תא רשת
תא ברשת הוא נקודת המפגש של שורה ועמודה.
אזור הרשת
אזור רשת מורכב מכמה תאי רשת. אפשר להגדיר אזור ברשת על ידי פריסת פריט על פני כמה מסלולים.
מרווח בין משבצות
מרווח ברשת הוא המרווח בין מסלולי הרשת. אי אפשר להציב רכיב בממשק המשתמש בתוך מרווח, אבל אפשר להרחיב רכיב בממשק המשתמש כך שיכסה אותו.
