LazyColumn StickyFooter or keep focus on bottom items
Asked Answered
Q

0

8

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 LazyColumns 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
                    )
                }
            }
        }
    }
}
Quadricycle answered 16/4, 2023 at 18:52 Comment(10)
Could you provide the code. Also, in theory, the reversed order of the data could be achieved by sorting the list in reversed order and saving the state as a result of derivedStateOf var. If you order just the data, the layout would be the same...Premillennialism
@YgorFrazão when you simply reverse the data, the focus will not stay on the bottom elements, but top elements. I added the codeQuadricycle
When i use it, i remember the list state and scroll to item i want to focus, this would solve you problem? I mean, at every update of the message list state, scroll to the list.size()-1 element. Use rememberLazyListState(), then, inside a LaunchedEffect() block, call ` listState.animateScrollToItem(messageList.size() -1)`Premillennialism
Also, encapsulate state.messages.asReversed() inside a derivedStateOf() in order recalculate the value in every recomposition. something like this: ``` val reversedList = remember { derivedStateOf { state.messages.asReversed() } } ```Premillennialism
Where it says "in order recalculate the value in every recomposition", read "in order to NOT recalculate the value in every recomposition".Premillennialism
@YgorFrazão scrolling to the last item will not help when you open the keyboard. It will keep focusing on the top elements instead of the bottom ones.Quadricycle
@YgorFrazão also, asReversed() will not create a new list, but simply wraps the original list and make it so the accessing the items will be reversed.Quadricycle
Let us continue this discussion in chat.Premillennialism
@AxborAxrorov have you had a chance to find the solution for your case? I've faced exactly the same issue.Osborn
@HiddenCoder7 Unfortunately no. issuetracker.google.com/issues/198165609 there is the issue, you can star it, so maybe it could help to speed up the process.Quadricycle

© 2022 - 2024 — McMap. All rights reserved.