4

I try to build list of items, where items are added to top or bottom of the list, based on header of footer click, but still keep normal list items in same position in screen.

Currently when AddMoreHeader() is clicked, new items are added to beginning of list. List scroll position stays the same so that AddMoreHeader() component keeps it current position as first visible item and all new items are added below it.

What I try to do is to keep all currently visible ListItem() components in same position and push AddMoreHeader() and all newly added item up (so user needs to scroll up to see them).

@Composable
fun List(viewModel: ViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    LazyColumn {
        item {
            AddMoreHeader(onClick = {viewModel.headerClick()}) // Adds new items to top of the list
        }
        items(items = uiState.listItems, key = { item -> item.getKey() }) { listItem ->
            ListItem(listItem)
        }
        item {
            AddMoreFooter(onClick = {viewModel.footerClick()}) // Adds new items to bottom of the list
        }
    }
}
devha
  • 3,307
  • 4
  • 28
  • 52

1 Answers1

0

You need to put your header and footer within the items block:

@Composable
fun List(viewModel: ViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    LazyColumn {
        items(items = uiState.listItems, key = { item -> item.getKey() }) { listItem ->
            if (listItem == uiState.listItems.first()) {
                AddMoreHeader(onClick = {viewModel.headerClick()})
            }
            ListItem(listItem)
            if (listItem == uiState.listItems.last()) {
                AddMoreFooter(onClick = {viewModel.footerClick()})
            }
        }
    }
}

I've attempted to just add keys for the header and footer, but it seems not work.

Chi-Hsuan Wu
  • 21
  • 1
  • This kind of works, but when adding items to top (AddMoreHeader click) list jumps to top by height of the AddMoreHeader. – devha Jul 31 '23 at 17:17