使用滚动位置重置更新 Jetpack Compose 列表

Question

In my app I have list of items shown with LazyColumn. My list can update fields and sometime reorder items. Whenever I have reorder of items I need to show list with first item at the top. I came up with setup like the one below. List scrolls to the top only on the first reorder event. On consecutive list update with reorder = true , my list not scrolling to the top. What is the better approach in Compose to reset list scroll position (or even force rebuilding compose list) by sending state from ViewModel?

class ViewItemsState(val items: List<ViewItem>, val scrollToTop: Boolean)

class ExampleViewModel() : ViewModel() {
    
    var itemsLiveData = MutableLiveData<ViewItemsState>()

}

@Composable
fun ExampleScreen(viewModel: ExampleViewModel = viewModel()) {

    val itemState  by viewModel.itemsLiveData.observeAsState()
    val coroutineScope = rememberCoroutineScope()
    val listState = rememberLazyListState()

    if (itemState.scrollToTop) {
        LaunchedEffect(coroutineScope) {
            Log.e("TAG", "TopCoinsScreen: scrollToTop" )
            listState.scrollToItem(0)
        }
    }

    LazyColumn(state = listState) {
        items(itemState.items) { item ->
            ItemCompose(
                item.name,
                item.value
            )
        }
    }
}

Answer 1

Recomposition is triggered only when a state changes.

Two things to fix in this,

1. Reset scrollToTop to false once scrolling completes.
2. Store scrollToTop in the view model as a MutableState , LiveData , Flow , or any other reactive element.

Currently scrollToTop is stored as a boolean in a data class object. Resetting the value will not trigger a Composable recomposition.

Example code with sample data,

class ViewItemsState(
    val items: List<String>,
)

class ExampleViewModel : ViewModel() {
    private var _itemsLiveData =
        MutableLiveData(
            ViewItemsState(
                items = Array(20) {
                    it.toString()
                }.toList(),
            )
        )
    val itemsLiveData: LiveData<ViewItemsState>
        get() = _itemsLiveData

    private var _scrollToTop = MutableLiveData(false)
    val scrollToTop: LiveData<Boolean>
        get() = _scrollToTop

    fun updateScrollToTop(scroll: Boolean) {
        _scrollToTop.postValue(scroll)
    }
}

@Composable
fun ExampleScreen(
    viewModel: ExampleViewModel = ExampleViewModel(),
) {
    val itemState by viewModel.itemsLiveData.observeAsState()
    val scrollToTop by viewModel.scrollToTop.observeAsState()
    val listState = rememberLazyListState()

    LaunchedEffect(
        key1 = scrollToTop,
    ) {
        if (scrollToTop == true) {
            listState.scrollToItem(0)
            viewModel.updateScrollToTop(false)
        }
    }

    Column {
        LazyColumn(
            state = listState,
            modifier = Modifier.weight(1f),
        ) {
            items(itemState?.items.orEmpty()) { item ->
                Text(
                    text = item,
                    modifier = Modifier.padding(16.dp),
                )
            }
        }
        Button(
            onClick = {
                viewModel.updateScrollToTop(true)
            },
        ) {
            Text(text = "Scroll")
        }
    }
}