יצירת רשת שניתן לגלול בה

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

תאימות גרסאות

כדי להטמיע את הקוד הזה, צריך להגדיר את minSDK של הפרויקט לרמת API 21 ואילך.

יחסי תלות

בחירת כיוון הרשת

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

יצירת רשת שניתן לגלול בה

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

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

נקודות עיקריות לגבי הקוד

  • הרכיב ה-composable LazyHorizontalGrid קובע את הכיוון האופקי של הרשת.
    • כדי ליצור רשת אנכית, משתמשים ב-LazyVerticalGrid במקום זאת.
  • המאפיין rows מציין איך לסדר את התוכן של התצוגה.
    • כדי להציג רשת אנכית, צריך להשתמש במאפיין columns כדי לציין את הסדר.
  • items(itemsList) מוסיף את itemsList ל-LazyHorizontalGrid. פונקציית הלמהדה יוצרת רכיב Text לכל פריט ומגדירה את הטקסט כתיאור הפריט.
  • item() מוסיף פריט אחד ל-LazyHorizontalGrid, בעוד שהפונקציה lambda מפעילה רכיב Text אחד שאפשר לשלב בדרכים דומות ל-items().
  • GridCells.Fixed מגדיר את מספר השורות או העמודות.

  • כדי ליצור רשת עם כמה שיותר שורות, מגדירים את מספר השורות באמצעות GridCells.Adaptive.

    בקוד הבא, הערך 20.dp מציין שכל עמודה צריכה להיות לפחות 20.dp, ושכל העמודות צריכות להיות באותו רוחב. אם המסך רחב ב-88.dp, יש 4 עמודות בגודל 22.dp כל אחת.

תוצאות

איור 1. רשת אופקית שניתן לגלול בה באמצעות LazyHorizontalGrid.

אוספים שמכילים את המדריך הזה

המדריך הזה הוא חלק מהאוספים הבאים של מדריכים מהירים, שמכסים יעדים רחבים יותר לפיתוח Android:

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

יש לך שאלות או משוב

אתם יכולים להיכנס לדף השאלות הנפוצות שלנו ולקרוא מדריכים מהירים, או ליצור איתנו קשר ולספר לנו מה דעתכם.
לשאלות נפוצות שליחת משוב