我正在使用 Jetpack Compose 并有一个 LazyColumn 来显示聊天消息。布局是反向的（reverseLayout = true），因此新消息显示在底部。但是，当我对每个项目使用一个键（基于 message.id）时，最新消息不会像预期的那样停留在底部。不使用键时，它可以正常工作。但是当我使用键时，它会停留在视口中充满项目的消息上，因此不滚动，我的意思是使用键时新项目不在底部，而将旧项目推到顶部。
@Composable
fun LazyColumnWithAddItemButton() {
// State to hold the list of messages (items)
val messages = remember { mutableStateListOf("Message 1", "Message 2", "Message 3") }
// LazyListState to track scroll position
val lazyListState = rememberLazyListState()
// Button click handler to add a new message
val addMessage = {
messages.add("Message ${messages.size + 1}")
}
// Box allows us to layer the LazyColumn and Button, with the button fixed at the bottom
Box(
modifier = Modifier.fillMaxSize()
) {
// LazyColumn with reverseLayout = true
LazyColumn(
state = lazyListState,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 72.dp) // Add padding to ensure button is not overlapped
.align(alignment = Alignment.BottomCenter),
contentPadding = PaddingValues(horizontal = 16.dp),
reverseLayout = true // Reverse layout so the first item is at the bottom
) {
items(messages.reversed(), key = {it}) { message ->
Text(
text = message,
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.background(Color.LightGray)
.padding(16.dp)
)
}
}
// Button fixed at the bottom of the screen
Button(
onClick = {
addMessage() // Add new message to the list
},
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter) // Position button at the bottom
.padding(16.dp)
) {
Text("Add New Message")
}
}
}
