LazyColumn 中隐藏的底部项目 - Jetpack Compose

Question

I am trying to create a list of items with a hidden button at the bottom. By default the button is not visible on the screen.

If a user scrolls to the bottom of the list the button should appear like it is the last item of the list.

I created illustrations to better visualize the desired behaviour:

Sketch 1: List with a few items

Sketch 2: List with a lot of items

I already tried the solution for a similar problem ( https://stackoverflow.com/a/69196765/11720296 ) and added extra offset but unfortunately it didn't work.

Does somebody have an idea how to create this behaviour?

Answer 1

itemsIndexed will help in this case in following example I have used itemsIndexed in Lazycolumn it gives index which is visible to the user. In this example I was trying to show some specific text only when first message is visible.

 LazyColumn() {
                itemsIndexed(tempListOfMessages) { index, localMessage ->
                    if (localMessage != null) {
                        SingleMessageView(
                            localMessageInfo = localMessage,
                            (index == 0)
                      )
                    }
                }  
            }

when scroll that text scroll with first item.

Answer 2

Try this.

Scaffold { paddingValues ->
LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = paddingValues
) {
  ...
}

}