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

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

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

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

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

אלמנטים

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

צעדים

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

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

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

המיקום שלכם בגלילה נשמר אוטומטית כשאתם כותבים הודעה.

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") }
        )
    }
}

תוצאות

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

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