如何在Jetpack Compose与Material 3中实现滑动删除手势？

核心组件说明 #

在最新的Material 3与Compose版本中，直接使用**SwipeToDismiss**组件实现滑动删除，搭配rememberSwipeToDismissState管理滑动状态即可，无需依赖旧版Material 2的API。

完整实现代码 #

首先需要将列表数据源改为可修改的状态容器（比如MutableStateList），这样删除操作能触发UI重组。以下是改造后的完整代码：

import androidx.compose.foundation.layout.Box
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.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.SwipeToDismiss
import androidx.compose.material3.Text
import androidx.compose.material3.DismissDirection
import androidx.compose.material3.DismissValue
import androidx.compose.material3.rememberSwipeToDismissState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyList(items: List<String>) {
    // 将传入的List转为可修改的MutableStateList，确保删除后UI自动更新
    val mutableItems = remember { mutableStateListOf<String>().apply { addAll(items) } }

    LazyColumn {
        // 为每个item指定key，提升删除后的重组效率
        items(mutableItems, key = { it }) { item ->
            // 初始化滑动删除状态
            val dismissState = rememberSwipeToDismissState(
                confirmValueChange = { dismissValue ->
                    // 确认是否执行删除动作，这里直接返回true允许从右往左滑删除
                    dismissValue == DismissValue.DismissedToStart
                }
            )

            SwipeToDismiss(
                state = dismissState,
                // 滑动时显示的背景（红色背景+右侧删除图标）
                background = {
                    Surface(
                        color = MaterialTheme.colorScheme.error,
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Box(
                            modifier = Modifier.fillMaxWidth()
                                .padding(horizontal = 16.dp),
                            contentAlignment = Alignment.CenterEnd
                        ) {
                            Icon(
                                imageVector = Icons.Default.Delete,
                                contentDescription = "删除",
                                tint = MaterialTheme.colorScheme.onError
                            )
                        }
                    }
                },
                // 要被滑动的列表项内容
                dismissContent = {
                    ListItem(
                        text = { Text(item) }
                    )
                },
                // 指定允许的滑动方向：从右往左滑
                directions = setOf(DismissDirection.EndToStart)
            )

            // 监听滑动完成事件，执行删除操作
            LaunchedEffect(dismissState.currentValue) {
                if (dismissState.currentValue == DismissValue.DismissedToStart) {
                    mutableItems.remove(item)
                    // 重置状态，以便下次滑动
                    dismissState.reset()
                }
            }
        }
    }
}

关键细节解释 #

1. 可修改数据源：使用MutableStateList而非普通List，它会在元素增减时自动触发Compose重组，更新UI。如果你的数据源来自ViewModel（比如StateFlow），只需替换为对应的状态流，在删除时调用ViewModel的删除方法即可。
2. rememberSwipeToDismissState：负责跟踪滑动状态，confirmValueChange回调用于确认是否允许执行删除动作。
3. SwipeToDismiss组件：
   • background：滑动时显示的底层布局，可自定义样式（比如示例中的红色背景+删除图标）。
   • dismissContent：包裹原列表项内容，即用户正常看到的列表项。
   • directions：指定允许的滑动方向，这里设置为仅支持从右往左滑删除。
4. 删除逻辑处理：通过LaunchedEffect监听状态变化，当滑动完成并触发删除状态时，从数据源移除对应项，并重置滑动状态以支持后续操作。
5. Key的使用：为items指定key参数，确保LazyColumn能高效识别列表项的增减，避免不必要的UI重组。

内容的提问来源于stack exchange，提问作者Roberto Leinardi