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

ההגדרה Grid קובעת את המבנה הכללי, אבל משתמשים ב-modifier‏ gridItem כדי לשלוט במיקום, בפריסה וביישור של הפריטים בתוך המבנה הזה.

הגדרת המיקום של הפריט

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

הפרמטרים row ו-column מציינים את אינדקסי השורות והעמודות שבהם הפריט ממוקם. האינדקסים של הטראקים מבוססים על 1 – הם מתחילים באחד. אם מציינים רק את row או את column (אבל לא את שניהם), הפריט ימוקם במקום הפנוי הבא באותו מסלול. אם מציינים את שניהם, הפריט ממוקם בתא הזה.

כדי לציין את אינדקס הטראק מההתחלה, משתמשים במספר שלם חיובי. לדוגמה, כדי למקם פריט בשורה ובעמודה הראשונות, משתמשים ב-gridItem(row = 1, column = 1).

כדי לציין את הטראק ביחס לסוף, משתמשים במספר שלם שלילי. לדוגמה, כדי למקם פריט בשורה ובעמודה הלפני אחרונות, משתמשים ב-gridItem(row = -2, column = -2).

בדוגמה הבאה, כרטיס מס' 2 ממוקם בשורה השנייה ובעמודה השנייה. כרטיס מספר 3 מוקצה לשורה האחרונה (עם אינדקס ‎-1), שבה הוא תופס באופן אוטומטי את העמודה הזמינה הראשונה במסלול הזה (איור 1).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

פריסה על פני שורות ועמודות

כדי לפרוס פריט על פני כמה תאים, משתמשים בפרמטרים rowSpan ו-columnSpan. אפשר להציב רכיב בממשק המשתמש באזור רשת, שמורכב מכמה תאי רשת. המשתנה gridItem מאפשר לציין את אזור הרשת באמצעות הפרמטרים rowSpan ו-columnSpan. בדוגמה הבאה, כרטיס מספר 1 ממוקם באזור שמורכב משתי שורות ושתי עמודות (איור 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

הגדרת היישור באזור של רשת

כדי להגדיר את היישור של רכיב בממשק המשתמש באזור של רשת, מציינים אותו בפרמטר alignment של מקש הצירוף gridItem. בדוגמה הבאה, #1 ממוקם במרכז אזור הרשת שמורכב משתי עמודות ושתי שורות.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

מיקום אוטומטי בשילוב עם פריטים שמוקמו ידנית

רכיב בממשק המשתמש ב-Grid שלא צוין לו מיקום, ממוקם באופן אוטומטי. בדוגמה הזו אפשר לראות איך לשלב בין רכיבים שממוקמים באופן אוטומטי לבין רכיבים בממשק המשתמש עם תאי רשת ספציפיים. כרטיס מספר 2 וכרטיס מספר 4 ממוקמים בתאי רשת ספציפיים, והפריטים האחרים ממוקמים באופן אוטומטי.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt