ניהול מצב הרשימה

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

רשימות עם גלילה ב-Jetpack Compose, כמו LazyColumn ו-LazyRow, יכולות להציג כמויות גדולות של נתונים ביעילות. עם זאת, שינויים בהגדרות האישיות, כמו סיבוב המכשיר או קיפול/פתיחה של מכשיר מתקפל, יכולים לאפס את המצב של הרשימה, ולגרום למשתמשים לגלול שוב למיקום הקודם שלהם.

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

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

אלמנטים

  • ‫rememberLazyListState(): יוצרת וזוכרת LazyListState שמשמש לשליטה במיקום הגלילה ברשימה ולמעקב אחריו. הוא נשמר באופן אוטומטי גם כשמבצעים שינויים בהגדרות האישיות.
  • ‫rememberSaveable: שומר את ערך המצב בשינויים בהגדרות, וזה שימושי לשמירת מצבים של רכיבי רשימה ספציפיים (כמו קלט של שדות טקסט).

צעדים

ב-Jetpack Compose, כשמשתמשים במצב גלילה, מיקום הגלילה של הרשימה נשמר באופן אוטומטי. כדי לשמור על המצב של רכיבי רשימה מורכבים ונפרדים (כמו קלט של TextField), משתמשים ב-rememberSaveable.

1. שמירה על מצב הגלילה ברשימה

כדי לשמור ולשחזר את מיקום הגלילה של הרשימה בשינויים בהגדרות, יוצרים LazyListState באמצעות rememberLazyListState() ומעבירים אותו כפרמטר state של הרשימה שניתן לגלול, כמו LazyColumn.

‫Compose שומר באופן אוטומטי את מיקום הגלילה.

2. שמירה על המצב של רכיב רשימה ספציפי

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

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

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

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

תוצאות

עכשיו הרשימה הניתנת לגלילה יכולה לשחזר את מיקום הגלילה ואת המצב של כל רכיב ברשימה.

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