I want to create a little messenger where messages are added from the bottom (new messages are placed at the bottom of the list). To achieve that I set the LazyColumn
s reversedLayout
property to true
. But if I do so, the sticky header also is reversed (acting like a sticky footer). If I set the property verticalArrangement
to Bottom
then when the keyboard opens the below message is not keeping the focus (it is going to the below keyboard). Also, the message list starting not from the newest messages but the oldest (like scrolling started from the top).
StickyFooter or Keeping the focus on bottom items could solve the problem? What Can I do for that?
code that I wrote:
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.weight(1f),
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
reverseLayout = true,
) {
val messages = state.messages.asReversed()
messages.forEachIndexed { index, message ->
val nextMessage = messages.getOrNull(index - 1)
val prevMessage = messages.getOrNull(index + 1)
val isNearToPrevious = isNear(message, prevMessage)
val isNearToNext = isNear(message, nextMessage)
item(message.id) {
GroupMessageItem(
message,
isNearToPrevious,
isNearToNext
)
}
if (!message.createdAt.isSameDayWith(prevMessage?.createdAt)) {
stickyHeader(key = "item: ${message.id}") {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 12.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
modifier = Modifier
.wrapContentSize()
.clip(MaterialTheme.shapes.small)
.background(MaterialThemeCustom.colors.backgroundVariant)
.padding(horizontal = 4.dp, vertical = 2.dp),
text = "Today",
style = MaterialThemeCustom.typography.regular12,
color = MaterialTheme.colors.onPrimary
)
}
}
}
}
}
rememberLazyListState()
, then, inside aLaunchedEffect()
block, call ` listState.animateScrollToItem(messageList.size() -1)` – Premillennialismstate.messages.asReversed()
inside aderivedStateOf()
in order recalculate the value in every recomposition. something like this: ``` val reversedList = remember { derivedStateOf { state.messages.asReversed() } } ``` – Premillennialism