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

הקובץ 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