Como salvar o estado de rolagem ao buscar dados parcialmente

Há vários problemas com seu código, provavelmente o mais proeminente sendo que você redefine a lista de modelos de visualização sempre que SecondScreen entra na composição (executando fetchInitialImages()). Isso acontece sempre que você alterna entre telas, mas também é acionado em alterações de configuração, como rotações de tela. A lista inteira é perdida e uma nova é criada. Essa provavelmente é a causa do seu problema principal.

Mas acho que não vale a pena consertar isso. Em vez disso, você deve refatorar seu aplicativo para usar a biblioteca de paginação ¹ e mover toda a lógica de carregamento de blocos para a camada de dados, onde ela pertence. Isso não é algo com que sua interface de usuário deva se preocupar. Você não precisa depender da API para suportar paginação; você pode implementá-la facilmente como um wrapper para qualquer API. Você só precisa criar um PagingSource:

class DuckImagePagingSource() : PagingSource<Int, String>() {
    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, String> {
        val currentPage = params.key ?: 1

        val ducks = if (currentPage == 1)
            // what fetchImages() previously returned
        else
            // what fetchNextData() previously returned

        return LoadResult.Page(
            data = ducks,
            prevKey = if (currentPage == 1) null else currentPage - 1,
            nextKey = currentPage + 1,
        )
    }

    override fun getRefreshKey(state: PagingState<Int, String>): Int? {
        return state.anchorPosition
    }
}

É isso.

Como os arquivos fetchImages()e do repositório fetchNextData()agora fazem parte do PagingSource, você não precisa mais expô-los no repositório. Em vez disso, exponha o próprio PagingSource:

class DuckImagesRepo() {
    val pagingSource: DuckImagePagingSource by lazy { DuckImagePagingSource() }
}

(Ou deixe o Hilt injetá-lo no repositório, ele não precisa ser inicializado preguiçosamente)

O modelo de visualização também pode ser limpo. Você não precisa mais viewStatede and DuckViewState, você também pode remover fetchInitialImages()and fetchNextImages(). Em vez disso, crie um Pagera partir do PagingSource do repositório e exponha-o como um fluxo:

@HiltViewModel
class SecondViewModel @Inject constructor(
    application: Application,
    private val duckImagesRepo: DuckImagesRepo,
) : ViewModel() {
    val duckPager: Flow<PagingData<String>> = Pager(
        PagingConfig(
            pageSize = 20,
        )
    ) { duckImagesRepo.pagingSource }
        .flow
        .cachedIn(viewModelScope)

    val scrollState = mutableStateOf(LazyGridState())
}

Observe que o fluxo não é convertido em um StateFlow; em vez disso cachedIn, é usado um método que faz algo semelhante, mas leva em consideração as especificidades do PagingData.

E, finalmente, você pode remover a lógica de carregamento do seu composable:

@Composable
fun SecondScreen(
    viewModel: SecondViewModel = hiltViewModel(),
    onDuckClicked: (str: String) -> Unit,
) {
    val ducks = viewModel.duckPager.collectAsLazyPagingItems()

    val scrollState by viewModel.scrollState

    if (ducks.loadState.refresh is LoadState.Loading)
        LoadingState()
    else
        Column {
            LazyVerticalGrid(
                state = scrollState,
                modifier = Modifier.padding(bottom = 90.dp),
                contentPadding = PaddingValues(all = 16.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                columns = GridCells.Fixed(2),
            ) {
                items(ducks.itemCount) { index ->
                    val duck = ducks[index]
                    if (duck == null)
                        // Use any placeholder you want for data that is already requested, but not yet loaded.
                        // Also see PagingConfig.enablePlaceholders
                        CircularProgressIndicator()
                    else
                        DuckImage(
                            onClick = { onDuckClicked(duck) },
                            imageUrl = "https://random-d.uk/api/${duck}.jpg",
                        )
                }
            }
        }
}

O fluxo é coletado com collectAsLazyPagingItems, especialmente projetado para paginação de dados. Ele retorna um LazyPagingItemsobjeto que pode ser consultado para saber o estado de carregamento atual e de onde você pode recuperar os dados. Ele carregará automaticamente novos dados quando necessário, e seu elemento de composição será recomposto quando os novos dados chegarem.

Como os dados agora são mantidos pelo repositório (respectivamente DuckImagePagingSource), eles sobrevivem a tudo o que você faz na sua interface de usuário (por exemplo, alternar telas, reconfigurar dispositivos e assim por diante).

Este é apenas um exemplo básico de como você pode criar seu próprio PagingSource. Há diversas configurações que você pode usar para ajustá-lo às suas necessidades específicas, como a getRefreshKey()implementação em si ou os diversos PagingConfig()parâmetros opcionais.

¹ Você precisa dos artefatos androidx.paging:paging-runtime-ktxe androidx.paging:paging-compose.