android - 如何使用jetpack compose在单击时删除视图组件

Question

我有一个这样的屏幕代码（显示一个简单的列表）。

我正在寻找的是在单击该项目时将其删除。

我怎样才能做到这一点？

HorizontalScroller {
    Row(modifier = Spacing(bottom = 16.dp, right = 16.dp)) {
        posts.forEach { post ->
            WidthSpacer(16.dp)
            Clickable(onClick = {
               // Delete the PostCardPopular I just added if it was clicked
            }) {
               PostCardPopular(post)
            }
        }
    }
 }

Answer 1

您可以使用模型对象和模型列表来实现这一点

@Model
object YourModel {
  val posts = ModelList<Post>()
}

.
.
.

HorizontalScroller {
    Row(modifier = Spacing(bottom = 16.dp, right = 16.dp)) {
        for(post in YourModel.posts)
            WidthSpacer(16.dp)
            Clickable(onClick = {
               YourModel.posts.remove(post)
            }) {
               PostCardPopular(post)
            }
        }
    }
 }

当您从 ModelList 中删除时，UI 将重新组合。

额外：谷歌发布了一个基本撰写的代码实验室。https://codelabs.developers.google.com/codelabs/jetpack-compose-basics/