如何使用 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

您可以使用模型 Object 和 ModelList 实现此目的

@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/

如何使用 Jetpack Compose 在单击时删除视图组件

How to delete a view component on click using jetpack compose

android

android-jetpack-compose