שכבות-על של רכיבים בממשק המשתמש עם רשת

ממשק ה-API‏ Grid של Jetpack Compose מיועד לפריסות מסך דו-ממדיות ומבניות. בניגוד לרשתות דינמיות, שעברו אופטימיזציה למערכי נתונים גדולים, Grid מאפשרת לכם להגדיר מבנה פריסה קבוע או רספונסיבי באמצעות רצועות (שורות ועמודות), רווחים ואזורי רשת. ממקמים פריטים במבנה הזה באמצעות Modifier.gridItem, שמאפשר שליטה מפורשת במיקום ובטווח בתוך קונטיינר הרשת.

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

שיטות מומלצות

• סדר ההצהרות: Grid פועל לפי סדר zIndex רגיל שמבוסס על סדר ההצהרות בתוך הבלוק Grid. פריטים שמוצהרים בשלב מאוחר יותר בבלוק התוכן Grid מוצגים מעל פריטים שהוצהרו בשלב מוקדם יותר.
• שליטה מפורשת ב-z-index: משתמשים ב-Modifier.zIndex אם רוצים לשלוט באופן מפורש בסדר הציור של רכיבים חופפים או לעקוף את סדר הציור שמוגדר כברירת מחדל.
• אזורים עם שמות לעומת שכבות-על של פריטים: משתמשים ב-Grid ובאזורים עם שמות כדי להגדיר את מבנה הפריסה, אבל שומרים את הלוגיקה המורכבת של שכבות-העל בתוך gridItem הספציפי אם שכבות-העל האלה קשורות באופן לוגי לתא הרשת הזה.
• הגדרת טווחים מכוונת לשכבות-על: כשמגדירים שכבות-על, חשוב לוודא שהפרמטרים rowSpan ו-columnSpan מכוונים לרכיבים החופפים כדי לשלוט במידת ההסתרה של התוכן שמתחת.

אלמנטים

• ‫Grid: קונטיינר פריסה דו-ממדי ומובנה
• ‫GridConfigurationScope.area: פונקציית היקף שמשמשת להגדרת אזורים בעלי שם ואזורים חופפים במסלולי רשת
• ‫Modifier.gridItem: משנה שמשמש למיקום של רכיבי composable ולפריסה שלהם על פני טראקים של רשת או באזורים מוגדרים ברשת
• ‫Modifier.zIndex: משנה שמשמש לשליטה מפורשת בסדר הציור והגובה של השכבה

צעדים

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

‫1. הגדרת הרשת

יוצרים Grid הגדרה שאפשר להרכיב ממנה הגדרות אחרות, ומציינים בה את השורות והעמודות, וגם אזורים בעלי שם שמשתרעים על פני תאים כדי להגדיר אזורים של שכבות-על:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. מיקום תוכן הבסיס והצהרה על שכבות-על

ממקמים את רכיבי ה-Composable הבסיסיים בתאי הרשת באמצעות Modifier.gridItem. Grid הסדר של הפריטים הוא הסדר הרגיל zIndex שמבוסס על סדר ההרכבה, כך שפריטים שמוצהרים מאוחר יותר בבלוק Grid מצוירים מעל פריטים קודמים. כשמציבים שכבת-על באותה תא או באזור חופף, צריך להצהיר על שכבת-העל כעל פונקציה שאפשר להרכיב אחרי רכיב הבסיס, או להפנות לאזור עם שם. אפשר להשתמש ב-Modifier.zIndex אם רוצים לשלוט באופן מפורש בסדר ברירת המחדל של הציור או לשנות אותו.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

תוצאות

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