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