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

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

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

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

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

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

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

אלמנטים

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

צעדים

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

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

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

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

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

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

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

בתוך פונקציית הלמבדה 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.

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