优化聊天滚动

This commit is contained in:
2024-10-10 02:11:02 +08:00
parent 19bb7715a2
commit dfce8e4e90

View File

@@ -35,6 +35,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Icon import androidx.compose.material.Icon
import androidx.compose.material.Scaffold import androidx.compose.material.Scaffold
import androidx.compose.material.Text import androidx.compose.material.Text
@@ -42,6 +43,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
@@ -90,6 +92,7 @@ fun ChatScreen(userId: String) {
} }
} }
) )
var isLoadingMore by remember { mutableStateOf(false) } // Add a state for loading
LaunchedEffect(Unit) { LaunchedEffect(Unit) {
viewModel.init(context = context) viewModel.init(context = context)
} }
@@ -104,16 +107,20 @@ fun ChatScreen(userId: String) {
val navigationBarHeight = with(LocalDensity.current) { val navigationBarHeight = with(LocalDensity.current) {
WindowInsets.navigationBars.getBottom(this).toDp() WindowInsets.navigationBars.getBottom(this).toDp()
} }
// 监听滚动状态,触发加载更多
LaunchedEffect(listState) { LaunchedEffect(listState) {
snapshotFlow { listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index } snapshotFlow { listState.layoutInfo.visibleItemsInfo.firstOrNull()?.index }
.collect { index -> .collect { index ->
if (index == listState.layoutInfo.totalItemsCount - 1) { if (index != null && index < 10 && !isLoadingMore && viewModel.hasMore) { // 调整阈值为 10
isLoadingMore = true
coroutineScope.launch { coroutineScope.launch {
viewModel.onLoadMore(context) viewModel.onLoadMore(context)
isLoadingMore = false
} }
} }
} }
} }
Scaffold( Scaffold(
modifier = Modifier modifier = Modifier
.fillMaxSize(), .fillMaxSize(),
@@ -190,7 +197,7 @@ fun ChatScreen(userId: String) {
) { ) {
val chatList = viewModel.getDisplayChatList() val chatList = viewModel.getDisplayChatList()
groupMessagesByTime(chatList, viewModel) // Pass viewModel to the function groupMessagesByTime(chatList, viewModel) // Pass viewModel to the function
items(chatList.size) { index -> items(chatList.size, key = { index -> chatList[index].msgId }) { index ->
val item = chatList[index] val item = chatList[index]
if (item.showTimestamp) { if (item.showTimestamp) {
val calendar = java.util.Calendar.getInstance() val calendar = java.util.Calendar.getInstance()
@@ -230,10 +237,16 @@ fun ChatSelfItem(item: ChatItem) {
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
.widthIn(min = 20.dp, max = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 250.dp else 150.dp)) .widthIn(
min = 20.dp,
max = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 250.dp else 150.dp)
)
.clip(RoundedCornerShape(8.dp)) .clip(RoundedCornerShape(8.dp))
.background(Color(0xFF000000)) .background(Color(0xFF000000))
.padding(vertical = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 8.dp else 0.dp), horizontal = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 16.dp else 0.dp)) .padding(
vertical = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 8.dp else 0.dp),
horizontal = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 16.dp else 0.dp)
)
.padding(bottom = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 3.dp else 0.dp)) .padding(bottom = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 3.dp else 0.dp))
) { ) {
when (item.messageType) { when (item.messageType) {
@@ -308,10 +321,16 @@ fun ChatOtherItem(item: ChatItem) {
Column { Column {
Box( Box(
modifier = Modifier modifier = Modifier
.widthIn(min = 20.dp, max = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 250.dp else 150.dp)) .widthIn(
min = 20.dp,
max = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 250.dp else 150.dp)
)
.clip(RoundedCornerShape(8.dp)) .clip(RoundedCornerShape(8.dp))
.background(Color(0xffFFFFFF)) .background(Color(0xffFFFFFF))
.padding(vertical = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 8.dp else 0.dp), horizontal = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 16.dp else 0.dp)) .padding(
vertical = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 8.dp else 0.dp),
horizontal = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 16.dp else 0.dp)
)
.padding(bottom = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 3.dp else 0.dp)) .padding(bottom = (if (item.messageType == V2TIMMessage.V2TIM_ELEM_TYPE_TEXT) 3.dp else 0.dp))
) { ) {
when (item.messageType) { when (item.messageType) {