[kotlin][Jetpack] LazyColumn Scroll

🤷‍♂️문제상황

LazyColumn을 이용하여 채팅화면을 구성할 때 채팅화면 진입 시 가장 밑으로 스크롤을 내려서 최근 대화를 사용자들에게 보여줄 필요가 있다.

이를 위해 LazyColumn과 함께 rememberLazyListState를 함께 사용했으나 정상적으로 작동하지 않음.

---

👍해결

엉뚱한 곳에서 헤매고 있었다.

일단 당연하게도 List형태의 채팅 내용들을 담은 변수가 있을 것이다.
이것을 기반으로 LazyColumn을 만들테고

이런 식으로 말이다.

//[2] 채팅 목록
LazyColumn(
    // TopBar 영역과 TextField 영역을 제외한 나머지 공간을 모두 차지
    modifier = Modifier.weight(1f),
    state = listState,
) {
    items(
        items = messageList,
        key = { (it.key) },
    ) { chatMessage ->
    	//사용자에 따라 채팅을 보여줄 수 있도록
        ChatBubble(chatMessage)
    }
}

우리가 스크롤을 해야하는 상황이라면 가장 중요하게 봐야할 것이 LazyColumn안에 있는 state이다!

나는 이 state를 LazyColumn 안에서만 제한적으로 사용하는 게 아니고 밖에서 사용하면서 이게 왜 안되나..이런 바보 같은 접근을 했다..당연히 될 리가 ㅠ

아무튼 이 일을 해결하기 위해 LayzColumn을 품고 있는 큰 UI의 시작점에

val listState = rememberLazyListState()

선언을 해두고 이 값을 LazyColumn안에 state에 적용시킨 후

LaunchedEffect(key1 = messageList.size) {
    if (messageList.isNotEmpty()) {
        listState.scrollToItem(messageList.size - 1)
    }
}

viewModel안에 존재하는 채팅 리스트의 사이즈 값을 이용해서 가장 밑으로 땡겼다!
이것 역시 컴포저블한 UI의 가장 큰 부분에 선언을 해두어 처음 시작부터 적용되고 상태가 계속 변경될 때마다 적용될 수 있도록 했다!

---

📋 해야할 일

1. LaunchedEffect
2. 채팅 보낼 때 시간을 현재 시간으로 (금방할 듯)
3. 채팅화면에 상단에 누구랑 대화하는지는 고정이 되어있어야 할 것 같다. 올리면서 보니까 상단바에 누구랑 대화하는지가 없어졌음!