android - Jetpack Compose - LazyColumnFor 在添加项目时不重新组合
问题描述
我正在尝试在 Jetpack Compose 中创建一个项目列表,该列表会在基础数据更改时自动更新,但它不会更新,并且在最初组成之后我无法将项目添加到 LazyColumnFor。
private var latestMessages = mutableListOf<ChatMessage>()
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(context = requireContext()).apply {
setContent {
LatestMessages(latestMessages)
}
}
}
@Composable
fun LatestMessages(messages: MutableList<ChatMessage>) {
Column {
LazyColumnFor(items = messages) { chatMessage ->
LatestMessageItem(chatMessage) {
// onclick
}
}
}
Box(alignment = Alignment.Center) {
Button(onClick = {
latestMessages.add(
ChatMessage(
"testId",
"testText2",
"testFromId2",
"testToId",
"timestamp",
0
)
)
}) {
}
}
}
Box中的按钮只是为了测试添加一个项目。据我了解,LazyColumnFor 应该在基础数据发生更改时更新,类似于 SwiftUI 中的 ForEach。我究竟做错了什么?
解决方案
Jetpack compose 始终需要在进行重组之前修改状态对象。您需要使用MutableStateList<T>
. 您可以传递对它的引用并以任何接受的方法进行更新SnapShotStateList<T>
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(context = requireContext()).apply {
setContent {
val latestMessages = mutableStateListOf<ChatMessage>()
LatestMessages(latestMessages)
}
}
}
@Composable
fun LatestMessages(messages: SnapshotStateList<ChatMessage>) {
Column {
LazyColumnFor(items = messages) { chatMessage ->
LatestMessageItem(chatMessage) {
// onclick
}
}
}
Box(alignment = Alignment.Center) {
Button(onClick = {
latestMessages.add(
ChatMessage(
"testId",
"testText2",
"testFromId2",
"testToId",
"timestamp",
0
)
)
}) {
}
}
}
推荐阅读
- vue.js - 如何在 v-slide-item 中单击时添加自定义功能?
- python - 将列表作为列添加到数据框
- oracle - SQL*PLUS - 假脱机时创建一个新文件夹
- ios - 自定义 UITableViewCell 类不起作用(Swift)
- twitter-bootstrap - 尝试在标题中旋转图像的建议
- javascript - 将 JSON 数据附加到 Node.js 中的现有对象数组
- ios - 获取 SF Symbol 的系统名称
- excel - 将多个 Column 映射并垂直转置到同一行中的同一 ID
- c++ - 初始化对象和赋值给对象的区别
- php - 具有纵横比的裁剪图像不考虑上下文