[英]Material Swipe To Dismiss in Jetpack Compose with a Column instead of a LazyColumn
In my Jetpack Compose project I want to use Material SwipeToDismiss to delete an item with a swipe.在我的 Jetpack Compose 项目中,我想使用 Material SwipeToDismiss 通过滑动删除一个项目。 In my composable I use a Column in a list instead of a LazyColumn.
在我的可组合中,我使用列表中的列而不是 LazyColumn。 The problem is that when the item is deleted a recomposition starts and all following items are also deleted (because the dismissState seems to be the same for the next item).
问题是当项目被删除时,重新组合开始并且所有后续项目也被删除(因为下一个项目的dismissState似乎相同)。 For example if the Column has 7 items and I delete item #5 then also item #6 and item #7 gets deleted.
例如,如果列有 7 个项目并且我删除了项目 #5,那么项目 #6 和项目 #7 也会被删除。
It works if I use a LazyColumn (probably because of the keys) with a fixed height but I just want a list of items without scrolling or a fixed height.如果我使用具有固定高度的 LazyColumn(可能是因为键),它可以工作,但我只想要一个不滚动或固定高度的项目列表。 Any suggestions how to get this running?
有什么建议可以让它运行吗?
@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun DocumentationsList(
modifier: Modifier = Modifier,
task: DBTask,
documentations: List<DBDocumentation>,
onDocumentationDelete: (DBDocumentation) -> Unit,
) {
Column(
modifier = modifier
) {
for ((index, documentation) in documentations.withIndex()) {
var dismissState = rememberDismissState(initialValue = DismissValue.Default)
if (dismissState.isDismissed(DismissDirection.EndToStart)) {
onDocumentationDelete(documentation)
}
SwipeToDismiss(
state = dismissState,
modifier = Modifier.padding(vertical = 4.dp),
directions = setOf(DismissDirection.EndToStart),
dismissThresholds = { direction ->
FractionalThreshold(if (direction == DismissDirection.StartToEnd) 0.25f else 0.5f)
},
background = {
val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
val color by animateColorAsState(
when (dismissState.targetValue) {
DismissValue.Default -> Color.LightGray
DismissValue.DismissedToEnd -> Color.Green
DismissValue.DismissedToStart -> Color.Red
}
)
val alignment = when (direction) {
DismissDirection.StartToEnd -> Alignment.CenterStart
DismissDirection.EndToStart -> Alignment.CenterEnd
}
val icon = when (direction) {
DismissDirection.StartToEnd -> Icons.Default.Done
DismissDirection.EndToStart -> Icons.Default.Delete
}
val scale by animateFloatAsState(
if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f
)
Box(
Modifier.fillMaxSize().background(color).padding(horizontal = 20.dp),
contentAlignment = alignment
) {
Icon(
icon,
contentDescription = "Localized description",
modifier = Modifier.scale(scale)
)
}
},
dismissContent = {
Card(
elevation = animateDpAsState(
if (dismissState.dismissDirection != null) 4.dp else 0.dp
).value
) {
// Layout here
}
}
)
}
}
You can use key
which will work the same LazyColumn
key
parameter:您可以使用可以使用相同
LazyColumn
key
参数的key
:
Column(
modifier = modifier
) {
for ((index, documentation) in documentations.withIndex()) {
key(uniqueKey) {
// your view
}
}
}
This should not be your index
, as it will change for all items below the deleted one after deletion, it should be some identifier unique to each item in your collection.这不应该是您的
index
,因为它会在删除后更改为已删除项之下的所有项目,它应该是您集合中每个项目的唯一标识符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.