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

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

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

הגדרת רשת

רשת מורכבת מעמודות ומשורות. רכיב ה-Composable‏ 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% מהגובה שנותר.
• פנימי: גודל הרצועה נקבע לפי התוכן שבה. מידע נוסף זמין במאמר בנושא קביעת גודל הרצועה של רשת באופן פנימי.

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

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 גמישים

אם אין יותר מקום בפריט Grid, אפשר להקטין את הגודל של רצועה גמישה רגילה ל-0.dp. כדי למנוע את זה ולוודא שהתוכן לא יידחס, צריך להשתמש ב-GridTrackSize.MinMax כדי לאכוף גודל מינימלי מפורש, תוך שמירה על גמישות של רצועת האודיו.

בדוגמה הבאה, לפחות 100.dp מוקצים לשורה הראשונה:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}
GridTrackSize.kt

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

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

הצבת רשימה עצלה בתוך רצועה גמישה רגילה גורמת לקריסה של IllegalStateException. כדי למקם בבטחה רשימות עצלות בתוך רצועת רשת גמישה, צריך להשתמש ב-MinMax עם גודל מינימלי מפורש (כמו 0.dp) כדי לעקוף את שלב המדידה המובנה.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}
GridTrackSize.kt

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

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