如何使用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会重新组成。

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