הגדרת מאפייני מאגר

אתם יכולים להגדיר הגדרות של מאגר Grid כדי ליצור פריסות גמישות שמותאמות לגדלים שונים של מסכים ולסוגים שונים של תוכן. בדף הזה נסביר איך:

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

הגדרת רשת

רשת מורכבת מעמודות ומשורות. לרכיב Grid יש פרמטר config שמקבל lambda כדי להגדיר את העמודות והשורות בתוך GridConfigurationScope. בדוגמה הבאה מוגדרת רשת עם שלוש שורות ושתי עמודות, שלכל אחת מהן גודל קבוע שמוגדר ב-Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

הצבת פריטים ברשת

‫Grid לוקח את רכיבי ממשק המשתמש ב-lambda‏ content ומציב אותם בתאים של רשת. הפריטים בפריסת הרשת מסודרים גם אם לא הגדרתם במפורש את השורות והעמודות. כברירת מחדל, רכיב UI ממוקם בתא הזמין ברשת בשורה הנוכחית. אם אין תא כזה, הוא ממוקם בתא הזמין ברשת בשורה הבאה.Grid אם אין תאים ריקים, Grid יוצר שורה חדשה.

בדוגמה הבאה, לרשת יש שש תאים והיא ממקמת כרטיס בכל אחד מהם (איור 1). כל תא ברשת הוא 160dp x 90dp, ולכן הגודל הכולל של הרשת הוא 320dp x 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

כדי לשנות את התנהגות ברירת המחדל הזו למילוי לפי עמודה, צריך להגדיר את המאפיין flow לערך GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

ניהול הגודל של רצועת השמע

המונח grid track מתייחס לשורות ולעמודות ביחד. אפשר לציין את הגודל של רצועת רשת באחת מהשיטות הבאות:

• קבוע (Dp): הקצאת גודל ספציפי (לדוגמה, column(180.dp)).
• חלקי (Float): מקצה אחוז מסוים מהשטח הכולל שזמין, מ-0.0f עד 1.0f (למשל, row(0.5f) ל-50%).
• גמיש (Fr): המערכת מחלקת את השטח שנותר באופן יחסי אחרי חישוב של רצועות קבועות וחלקיות. לדוגמה, אם שתי שורות מוגדרות ל-1.fr ול-3.fr, השורה השנייה מקבלת 75% מהגובה שנותר.
• Intrinsic: גודל הרכיב נקבע לפי התוכן שבו. מידע נוסף זמין במאמר בנושא קביעת גודל הרצועה ברשת באופן פנימי.

בדוגמה הבאה נעשה שימוש באפשרויות השונות של גודל הרצועה כדי להגדיר את גובה השורות:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

קביעת הגודל של קווי הרשת באופן פנימי

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

• ‫GridTrackSize.MaxContent: שימוש בגודל המקסימלי של התוכן (למשל, הרוחב נקבע לפי האורך המלא של הטקסט בבלוק טקסט ללא גלישת שורות).
• ‫GridTrackSize.MinContent: משתמשים בגודל המינימלי המובנה של התוכן (לדוגמה, הרוחב נקבע לפי המילה הארוכה ביותר בבלוק טקסט).
• ‫GridTrackSize.Auto: שימוש בגודל גמיש לטראק שמותאם לפי המקום הפנוי. כברירת מחדל, הוא מתנהג כמו MaxContent, אבל הוא מתכווץ ומציג את התוכן שלו בשורות כדי להתאים למאגר ההורה.

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

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

הגדרת רווחים בין שורות ועמודות

אחרי שמשנים את הגודל של הטראקים בתצוגת המשבצות, אפשר לשנות את המרווח בין המשבצות כדי לשפר את המרווח בין הטראקים. אפשר לציין את הרווח בין העמודות באמצעות הפונקציה columnGap, ואת הרווח בין השורות באמצעות הפונקציה rowGap. בדוגמה הבאה, יש מרווח 16dp בין כל שורה ומרווח 8dp בין כל עמודה (איור 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

אפשר גם להשתמש בפונקציית הנוחות gap כדי להגדיר מרווחים בגודל זהה של עמודות ושורות, וכדי להגדיר גדלים של עמודות ומרווחים בנפרד באמצעות פונקציה אחת. הקוד הבא מוסיף רווחים של 8dp לרשת:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt