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添加依赖:

Kotlin 复制代码

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处理滑动冲突，或禁用内部滑动;