פריסת טבלה עם רשת

סמל של דירוג ארבעה כוכבים

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

במתכון הזה, יוצרים טבלה באמצעות Grid API.

טבלה 1. השוואה בין התכונות של ממשקי ה-API‏ FlexBox ו-Grid
פריסה טעינה מדורגת גלישת טקסט עדכון פריסה דינמית
FlexBox יום לא כן כן
Grid דו-ממדי לא לא כן

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

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

אלמנטים

  • ‫Grid: פריסה שאפשר להרכיב ממנה פריסות אחרות, שבה הפריטים מוצבים ברשת דו-ממדית. הגדרת הפריסה מצוינת בפרמטר lambda‏ config, ופריטים של תוכן ממשק המשתמש מוצהרים בפרמטר lambda‏ content.
  • ‫GridTrackSize.Auto: מציין שינוי גודל אוטומטי של רצועות ברשת בהתאם לגודל המהותי של התוכן. לדוגמה: column(GridTrackSize.Auto) ו-row(GridTrackSize.Auto).
  • ‫gap(): מגדיר את הריווח בין השורות והעמודות בתוך GridConfigurationScope, למשל gap(row = 8.dp, column = 16.dp).

צעדים

יוצרים טבלת השוואה עם כמה עמודות באמצעות פריסת Grid אחת עם יישור אוטומטי של העמודות והתאמת הגודל של כל הפריטים.

1. ספירת השורות והעמודות ברשת כדי לקבוע את גודלי הרצועות

קודם כל, סופרים את העמודות והשורות כדי לקבוע את הגודל של הרצועות:

  • עמודות: מספר המאפיינים שאתם משווים, ועוד עמודה אחת לשם הפריט.
  • שורות: מספר הפריטים שאתם משווים, ועוד שורת כותרת אחת.

לדוגמה, כדי להשוות בין שני רכיבים (FlexBox ו-Grid) בארבעה מאפיינים, צריך ליצור טבלה עם חמש עמודות ושלוש שורות.

2. הטמעה של טבלת השוואה באמצעות Grid

יוצרים קומפוזבל TableInGrid שמשתמש ב-Grid כדי להציג את הפריטים בטבלה. קוראים לפונקציות column ו-row בתוך הלמדה config כדי להגדיר את גדלי הרצועות, ומגדירים את הריווח בין התאים באמצעות gap(). לטקסט יש גודל פנימי, ולכן GridTrackSize.Auto משנה את הגודל של העמודות והשורות באופן אוטומטי כדי שיתאים לתוכן שלהן.

בתוך ה-lambda‏ content, מציבים את כותרות הטבלה והנתונים. ‫Grid מטפל באופן אוטומטי במיקום וביישור של כל התאים:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

תוצאות

יצרתם טבלת השוואה נקייה ודו-ממדית עם יישור אוטומטי של העמודות וריווח בין התאים.

איור 1. טבלת ההשוואה באמצעות Grid.

מקורות מידע נוספים