Compose笔记(四十九)--SwipeToDismiss
这一节主要了解一下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处理滑动冲突,或禁用内部滑动;