I have a Compose screen, with two separate components:
horizontal scroll of items
vertical scroll of card items, which need to be paginated
I also have a ViewModel attached to that screen which provides the state:
val viewState: StateFlow<MyScreenState> = _viewState
...
data class MyScreenState(
val horizontalObjects: List<MyObject>,
val verticalCardsPaged: Flow<PagingData<MyCard>>
)
The cards are paged, the horizontal list doesn't have to be. In the Compose screen, I receive and use the state like so:
val state = viewModel.viewState.collectAsState().value
MyScreen(state)
...
#Composable
fun MyScreen(state: MyScreenState) {
val cards: LazyPagingItems<MyCard> = state.verticalCardsPaged.collectAsLazyPagingItems()
LazyRow {
items(state.horizontalObjects) {
...
}
}
LazyColumn {
items(cards) {
...
}
}
}
So I have a Flow inside Flow, effectively. It all seems to be working ok, but I'm not sure if I should be combining them instead of nesting? What would be the preferred approach here?
I have a very strange problem with my LazyColumn. I am updating the menuList State in the ViewModel, the view recomposes but the list doesn't get redrawn.
When I use the debugger, it gets to LazyColumn and then stops, which means the children aren’t redrawn with the new data. Any ideas why? Thanks!
MyView:
val menuList = viewModel.menuData.observeAsState()
LazyColumn() { // <- Debugger stops here
items(menuList.value.sections.size) { i->
MenuItem(menuList.value[i])
}
}
MyViewModel:
private var menu: MenuUiState? = null
val menuData: MutableLiveData<MenuUiState> by lazy {
MutableLiveData<MenuUiState>()
}
// ...
menu?.sections?.forEach {
//update menu properties here
}
menuData.value = menu?.copy()
You are observing the MenuUiState object, but you are not actually observing changes made to the items of the sections list.
You should either make sections a MutableStateList inside MenuUiState, or have the ViewModel store it directly:
val sections = mutableStateListOf<Section>() // store it either inside the ViewModel or inside MenuUiState
Then just observe it in the composable normally:
LazyColumn() { // <- Debugger stops here
items(viewModel.sections) { section ->
MenuItem(section)
}
}
I am writing some pager code in jetpack compose and came to a situation where I need to change page number by button click. This is my event on button click:
onClick = {pagerState.scrollToPage(page=currentPager+1)}
but when I do this I get this error: Suspend function 'scrollToPage' should be called only from a coroutine or another suspend function
I got a solution to this by adding:
onClick = {GlobalScope.launch (Dispatchers.Main) {pagerState.scrollToPage(page=currentPager+1)}}
but still GlobalScope.launch is not recommended. Above onClick are called inside basic compose functions. How can I fix this issue in jetpack compose?
Go through this documentation : Accompanist Pager
Here is a raw code: Raw code for scroll to page
If you want to jump to a specific page, you either call call pagerState.scrollToPage(index) or pagerState.animateScrollToPage(index) method in a CoroutineScope:
val pagerState = rememberPagerState()
val scope = rememberCoroutineScope()
HorizontalPager(count = 10, state = pagerState) { page ->
// ...page content
}
// Later, scroll to page 2
scope.launch {
pagerState.scrollToPage(2)
}
You should use the code below to create a coroutines scope in your composable.
val coroutinesScope = rememberCoroutineScope()
Note that you can only call this inside a composable so you cannot create coroutinesScope inside your onClick() and have to initialize it on the top of your composable.
I'm using androidx.paging:paging-compose (v1.0.0-alpha-14), together with Jetpack Compose (v1.0.3), I have a custom PagingSource which is responsible for pulling items from backend.
I also use compose navigation component.
The problem is I don't know how to save a state of Pager flow between navigating to different screen via NavHostController and going back (scroll state and cached items).
I was trying to save state via rememberSaveable but it cannot be done as it is not something which can be putted to Bundle.
Is there a quick/easy step to do it?
My sample code:
#Composable
fun SampleScreen(
composeNavController: NavHostController? = null,
myPagingSource: PagingSource<Int, MyItem>,
) {
val pager = remember { // rememberSaveable doesn't seems to work here
Pager(
config = PagingConfig(
pageSize = 25,
),
initialKey = 0,
pagingSourceFactory = myPagingSource
)
}
val lazyPagingItems = pager.flow.collectAsLazyPagingItems()
LazyColumn() {
itemsIndexed(items = lazyPagingItems) { index, item ->
MyRowItem(item) {
composeNavController?.navigate(...)
}
}
}
}
I found a solution!
#Composable
fun Sample(data: Flow<PagingData<Something>>):
val listState: LazyListState = rememberLazyListState()
val items: LazyPagingItems<Something> = data.collectAsLazyPagingItems()
when {
items.itemCount == 0 -> LoadingScreen()
else -> {
LazyColumn(state = listState, ...) {
...
}
}
}
...
I just found out what the issue is when using Paging.
The reason the list scroll position is not remembered with Paging when navigating boils down to what happens below the hood.
It looks like this:
Composable with LazyColumn is created.
We asynchronously request our list data from the pager. Current pager list item count = 0.
The UI draws a lazyColumn with 0 items.
The pager responds with data, e.g. 10 items, and the UI is recomposed to show them.
User scrolls e.g. all the way down and clicks the bottom item, which navigates them elsewhere.
User navigates back using e.g. the back button.
Uh oh. Due to navigation, our composable with LazyColumn is recomposed. We start again with asynchronously requesting pager data. Note: pager item count = 0 again!
rememberLazyListState is evaluated, and it tells the UI that the user scrolled down all the way, so it now should go back to the same offset, e.g. to the fifth item.
This is the point where the UI screams in wild confusion, as the pager has 0 items, so the lazyColumn has 0 items.
The UI cannot handle the scroll offset to the fifth item. The scroll position is set to just show from item 0, as there are only 0 items.
What happens next:
The pager responds that there are e.g. 10 items again, causing another recomposition.
After recomposition, we see our list again, with scroll position starting on item 0.
To confirm this is the case with your code, add a simple log statement just above the LazyColumn call:
Log.w("TEST", "List state recompose. " +
"first_visible=${listState.firstVisibleItemIndex}, " +
"offset=${listState.firstVisibleItemScrollOffset}, " +
"amount items=${items.itemCount}")
You should see, upon navigating back, a log line stating the exact same first_visible and offset, but with amount items=0.
The line directly after that will show that first_visible and offset are reset to 0.
My solution works, because it skips using the listState until the pager has loaded the data.
Once loaded, the correct values still reside in the listState, and the scroll position is correctly restored.
Source: https://issuetracker.google.com/issues/177245496
Save the list state in your viewmodel and reload it when you navigate back to the screen containing the list. You can use LazyListState in your viewmodel to save the state and pass that into your composable as a parameter. Something like this:
class MyViewModel: ViewModel() {
var listState = LazyListState()
}
#Composable
fun MessageListHandler() {
MessageList(
messages: viewmodel.messages,
listState = viewmode.listState
)
}
#Composable
fun MessageList(
messages: List<Message>,
listState: LazyListState) {
LazyColumn(state = listState) {
}
}
If you don't like the limitations that Navigation Compose puts on you, you can try using Jetmagic. It allows you to pass any object between screens and even manages your viewmodels in a way that makes them easier to access from any composable:
https://github.com/JohannBlake/Jetmagic
The issue is that when you navigate forward and back your composable will recompose and collectAsLazyPagingItems() will be called again, triggering a new network request.
If you want to avoid this issue, you should call pager.flow.cacheIn(viewModelScope) on your ViewModel with activity scope (the ViewModel instance is kept across fragments) before calling collectAsLazyPagingItems().
LazyPagingItems is not intended as a persistent data store; it is just a simple wrapper for the UI layer. Pager data should be cached in the ViewModel.
please try using '.cachedIn(viewModelScope) '
simple example:
#Composable
fun Simple() {
val simpleViewModel:SimpleViewModel = viewModel()
val list = simpleViewModel.simpleList.collectAsLazyPagingItems()
when (list.loadState.refresh) {
is LoadState.Error -> {
//..
}
is LoadState.Loading -> {
BoxProgress()
}
is LoadState.NotLoading -> {
when (list.itemCount) {
0 -> {
//..
}
else -> {
LazyColumn(){
items(list) { b ->
//..
}
}
}
}
}
}
//..
}
class SimpleViewModel : ViewModel() {
val simpleList = Pager(
PagingConfig(PAGE_SIZE),
pagingSourceFactory = { SimpleSource() }).flow.cachedIn(viewModelScope)
}
I'm converting my project from view system to compose. In one of app page's in old view system I have a fragment with one viewPager which just make some pages of same fragment with different data to show. While each fragment has it's own lifecycle I can have multiple isolated viewModel per each fragment. In Compose as far as I know viewModel life cycle is attached to navigation graph, therefor each time I try to access viewModel it just return same viewModel object that's created in first call. how can I achieve same view system behavior in compose?
this is simplified version of what my app is doing now
#Composable
fun MainScreen(mainViewModel: MainViewModel = hiltViewModel()) {
val pages = mainViewModel.pages.collectAsState()
val pagerState = rememberPagerState(pageCount = pages.size)
HorizontalPager(state = pagerState) {
ChildScreen()
}
}
#Composable
fun ChildScreen(childViewModel:ChildViewModel = hiltViewModel()){
}
here childViewModel is always one object for all pages