唯客微博客

专注于计算机,嵌入式领域的技术

0%

Jetpack Compose组件-左右滑动删除(SwipeToDismiss)

Jetpack Compose组件-左右滑动删除(SwipeToDismiss)

左右滑动删除(SwipeToDismiss)

Divider是将列表和布局中的内容分组的细线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Composable
@ExperimentalMaterialApi
fun SwipeToDismiss(
// 滑动状态
state: DismissState,
// 修饰符
modifier: Modifier = Modifier,
// 滑动的方向
directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd),
// 滑动阈值
dismissThresholds: (DismissDirection) -> ThresholdConfig = {
FixedThreshold(DISMISS_THRESHOLD)
},
// 背景
background: @Composable RowScope.() -> Unit,
// 删除的内容
dismissContent: @Composable RowScope.() -> Unit
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var unread by remember { mutableStateOf(false) }
val dismissState = rememberDismissState(
confirmStateChange = {
if (it == DismissValue.DismissedToEnd) unread = !unread
false
}
)
SwipeToDismiss(
state = dismissState,
modifier = Modifier.padding(vertical = 4.dp),
dismissThresholds = {
FixedThreshold(20.dp)
},
directions = setOf(DismissDirection.StartToEnd, DismissDirection.EndToStart),
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)
.clickable {
Log.d("1234", "SwipeToDismiss DismissedToStart")
}
)
}
},
dismissContent = {
Card(
elevation = animateDpAsState(
if (dismissState.dismissDirection != null) 4.dp else 0.dp
).value
) {
ListItem(
text = {
Text("SwipeToDismiss", fontWeight = if (unread) FontWeight.Bold else null)
},
secondaryText = { Text("Swipe me left or right!") }
)
}
}
)
-------------本文结束感谢您的阅读-------------

本文标题:Jetpack Compose组件-左右滑动删除(SwipeToDismiss)

文章作者:Vinx

发布时间:2023年01月13日 - 17:22

最后更新:2023年09月19日 - 08:40

原始链接:https://blog.vinkvin.com/post/73/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。