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

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