مدیریت وضعیت را فهرست کنید

نماد امتیاز سه ستاره

لیست‌های قابل اسکرول در Jetpack Compose، مانند LazyColumn و LazyRow ، می‌توانند حجم زیادی از داده‌ها را به طور موثر نمایش دهند. با این حال، تغییرات پیکربندی، مانند چرخش دستگاه یا تا کردن/باز کردن یک دستگاه تاشو، می‌تواند وضعیت یک لیست را مجدداً تنظیم کند و کاربران را مجبور کند دوباره به موقعیت قبلی خود اسکرول کنند.

بهترین شیوه‌ها

لیست‌های قابل اسکرول باید وضعیت خود - به ویژه موقعیت اسکرول - و وضعیت عناصر لیست (مانند ورودی‌های متنی) را در طول تمام تغییرات پیکربندی حفظ کنند تا یک تجربه کاربری یکپارچه ارائه دهند.

مواد لازم

  • rememberLazyListState() : یک LazyListState ایجاد و به خاطر می‌سپارد که برای کنترل و مشاهده موقعیت اسکرول لیست استفاده می‌شود. این LazyListState به طور خودکار در طول تغییرات پیکربندی حفظ می‌شود.
  • rememberSaveable : مقدار حالت را در طول تغییرات پیکربندی به خاطر می‌سپارد، که برای حفظ حالت‌های تک تک عناصر لیست (مانند ورودی‌های فیلد متنی) مفید است.

مراحل

در Jetpack Compose، حفظ موقعیت اسکرول یک لیست هنگام استفاده از حالت اسکرول به طور خودکار انجام می‌شود. برای حفظ حالت عناصر لیست پیچیده و منفرد (مانند ورودی‌های TextField )، از rememberSaveable استفاده کنید.

۱. حفظ وضعیت اسکرول لیست

برای ذخیره و بازیابی موقعیت اسکرول لیست خود در طول تغییرات پیکربندی، با استفاده از rememberLazyListState() یک LazyListState ایجاد کنید و آن را به عنوان پارامتر state لیست قابل اسکرول خود، مانند LazyColumn ارسال کنید.

نوشتن به طور خودکار موقعیت پیمایش را برای شما حفظ می‌کند.

۲. حفظ وضعیت تک تک عناصر لیست

اگر لیست شما حاوی عناصر دارای وضعیت (برای مثال، مواردی با فیلدهای متنی) باشد، وضعیت آن عناصر منفرد می‌تواند هنگام پیمایش از صفحه و بازیافت یا در حین تغییرات پیکربندی از بین برود.

برای حفظ حالت تک تک عناصر، 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") }
        )
    }
}

نتایج

اکنون لیست قابل پیمایش شما می‌تواند موقعیت پیمایش خود و وضعیت هر عنصر موجود در لیست را بازیابی کند.

منابع اضافی