如何在Jetpack Compose中实现LazyList列表多选功能？

Compose 没有提供和原生 ListView CHOICE_MODE_MULTIPLE_MODAL 完全对应的内置API，但我们可以通过状态管理 + 手势检测快速实现完全一致的效果，具体实现步骤如下：

1. 定义多选状态 #

首先封装一个状态类持有多选相关的状态，配合remember实现页面内的状态持久化：

// 多选状态泛型类，T为列表项唯一标识的类型
data class MultiSelectState<T>(
    val isInMultiSelectMode: Boolean = false,
    val selectedItems: Set<T> = emptySet()
)

@Composable
fun <T> rememberMultiSelectState(): MutableState<MultiSelectState<T>> {
    return remember { mutableStateOf(MultiSelectState()) }
}

2. 给列表项添加点击/长按手势 #

使用combinedClickable修饰符同时监听长按和点击事件，实现多选模式的开启和选中状态切换：

// 在页面中声明多选状态，示例中用Long作为列表项ID的类型
val multiSelectState = rememberMultiSelectState<Long>()

LazyColumn(contentPadding = PaddingValues(16.dp)) {
    items(items = yourDataList, key = { it.id }) { item ->
        val currentState = multiSelectState.value
        val isSelected = currentState.selectedItems.contains(item.id)
        
        ListItem(
            modifier = Modifier
                .combinedClickable(
                    onLongClick = {
                        // 长按开启多选模式，默认选中当前项
                        multiSelectState.value = currentState.copy(
                            isInMultiSelectMode = true,
                            selectedItems = setOf(item.id)
                        )
                    },
                    onClick = {
                        if (currentState.isInMultiSelectMode) {
                            // 多选模式下切换当前项选中状态
                            val newSelectedSet = if (isSelected) {
                                currentState.selectedItems - item.id
                            } else {
                                currentState.selectedItems + item.id
                            }
                            // 选中项为空时自动退出多选模式
                            multiSelectState.value = currentState.copy(
                                selectedItems = newSelectedSet,
                                isInMultiSelectMode = newSelectedSet.isNotEmpty()
                            )
                        } else {
                            // 非多选模式执行普通点击逻辑，比如跳转详情页
                            navigateToItemDetail(item.id)
                        }
                    }
                )
                // 选中状态添加高亮背景
                .background(
                    color = if (isSelected) MaterialTheme.colorScheme.primaryContainer 
                            else Color.Transparent,
                    shape = RoundedCornerShape(8.dp)
                ),
            headlineContent = { Text(item.title) },
            supportingContent = { Text(item.subtitle) },
            trailing = if (isSelected) {
                { Icon(Icons.Default.CheckCircle, contentDescription = "已选中") }
            } else null
        )
    }
}

3. 响应状态变化更新AppBar #

根据多选状态的变化，响应式渲染不同的AppBar内容：

val currentState = multiSelectState.value
Scaffold(
    topBar = {
        if (currentState.isInMultiSelectMode) {
            // 多选模式下的AppBar
            TopAppBar(
                title = { Text("已选中 ${currentState.selectedItems.size} 项") },
                navigationIcon = {
                    IconButton(onClick = {
                        // 点击关闭按钮退出多选模式
                        multiSelectState.value = MultiSelectState()
                    }) {
                        Icon(Icons.Default.Close, contentDescription = "退出多选")
                    }
                },
                actions = {
                    // 可添加删除、批量分享等多选操作按钮
                    IconButton(onClick = { batchDeleteItems(currentState.selectedItems) }) {
                        Icon(Icons.Default.Delete, contentDescription = "删除选中项")
                    }
                }
            )
        } else {
            // 普通模式下的默认AppBar
            TopAppBar(
                title = { Text("列表页") }
            )
        }
    }
) { paddingValues ->
    // 把LazyList放在Scaffold的content区域，加上padding避免被AppBar遮挡
    LazyColumn(
        modifier = Modifier.padding(paddingValues),
        contentPadding = PaddingValues(16.dp)
    ) {
        // 列表项代码放在这里
    }
}

实现效果和原生实现完全一致：

可选优化 #

如果需要配置变更（如屏幕旋转）时选中状态不丢失，可以把MultiSelectState的持有逻辑放到ViewModel中，替代页面级的remember即可。

内容的提问来源于stack exchange，提问作者Mery Karapetyan