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

אתם יכולים להגדיר תצורת מאגר 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 מתייחס לשורות ולעמודות ביחד. אפשר לציין את הגודל של grid track באחת מהשיטות הבאות:

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

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

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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
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