当前位置：首页 > news >正文

Compose笔记(四十九)--SwipeToDismiss

news 2025/9/9 10:00:40

这一节主要了解一下Compose中的SwipeToDismiss，在Jetpack Compose开发中，SwipeToDismiss 是用于实现滑动删除的核心组件，适用于检测水平滑动手势并触发相应的动画和操作。简单总结:

API
1 DismissState：管理滑动状态的核心类，通过rememberDismissState()创建，包含：
dismissDirection：当前滑动方向
progress：滑动进度
isDismissed(DismissDirection)：判断是否已完全滑出
performDrag(delta: Float)：内部用于处理滑动距离的方法
2 DismissDirection：枚举类，定义允许的滑动方向：
StartToEnd：从左向右滑动（右滑）
EndToStart：从右向左滑动（左滑）
3 DismissValue：枚举类，表示滑动结束后的状态：
DismissedToStart：完全滑向起始方向（左滑结束）
DismissedToEnd：完全滑向结束方向（右滑结束）
Default：未滑动或滑动未达到阈值
4 ThresholdConfig：定义触发操作的阈值配置：
FractionalThreshold(fraction)：按滑动距离比例
FixedThreshold(pixels)：按固定像素值触发

使用场景:
1 列表项左滑删除
2 滑动显示操作按钮
3 卡片类组件的滑动交互

栗子:gradle添加依赖:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.DismissDirection
import androidx.compose.material.DismissValue
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.SwipeToDismiss
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material.rememberDismissState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
@Composable
fun SwipeToDeleteDemo() {var items by remember {mutableStateOf(List(20) { "列表项 ${it + 1}" })}val listState = rememberLazyListState()LazyColumn(state = listState) {items(items, key = { it }) { item ->val dismissState = rememberDismissState(confirmStateChange = { dismissValue ->if (dismissValue == DismissValue.DismissedToStart) {items = items.filter { it != item }true} else {false}})SwipeToDismiss(state = dismissState,background = {Box(modifier = Modifier.fillMaxSize().background(Color.Red).padding(16.dp),contentAlignment = Alignment.CenterEnd) {Icon(imageVector = Icons.Default.Delete,contentDescription = "删除",tint = Color.White)}},dismissContent = {Box(modifier = Modifier.fillMaxWidth().background(MaterialTheme.colorScheme.surface).padding(20.dp)) {Text(text = item)}},directions = setOf(DismissDirection.EndToStart))}}
}

注意事项
1 明确限制滑动方向,通过directions参数指定允许的滑动方向，避免无意义的双向滑动;
2 处理状态变化的确认逻辑,confirmStateChange回调用于确认是否允许状态变化，返回true表示允许;
3 避免嵌套滑动冲突,若滑动项内部包含可滑动组件，需通过nestedScroll处理滑动冲突，或禁用内部滑动;