Drag Select Compose：实现多平台图片多选功能的利器

在现代移动应用开发中，多选功能是一个常见且实用的需求。而实现这种功能可能涉及到复杂的手势处理和状态管理。今天，我将介绍一款强大的Compose多平台库——Drag Select Compose，它能够轻松实现类似于Google Photos的多选功能，并支持多平台使用。

适用平台

Drag Select Compose是一个为Compose多平台编写的库，支持以下平台：

• Android
• iOS
• JVM（桌面）
• JavaScript/WASM（浏览器）
  灵感来源

这个库的灵感来源于这篇文章以及这个gist。同时，还借鉴了[drag-select-recyclerview]https://github.com/afollestad/drag-select-recyclerview库的设计思路。

设置

您可以通过Gradle将该库添加到项目中。以下是单平台和多平台的设置方法。

单平台设置

在单平台项目（如Android）中添加依赖：

dependencies {
// 包含核心功能和所有可选模块
implementation(“com.dragselectcompose:dragselect:2.3.0”)

// 或者选择需要的模块

// 核心功能
implementation(“com.dragselectcompose:core:2.3.0”)

// 为Grid项添加语义和toggle修饰符的可选扩展
implementation(“com.dragselectcompose:extensions:2.3.0”)

// 为LazyGrid实现选择UI的可选包装器
implementation(“com.dragselectcompose:grid:2.3.0”)
}
多平台设置

在多平台项目中添加依赖：

kotlin {
sourceSets {
commonMain {
dependencies {
// 包含核心功能和所有可选模块
implementation(“com.dragselectcompose:dragselect:2.3.0”)

// 或者选择需要的模块

// 核心功能
implementation(“com.dragselectcompose:core:2.3.0”)

// 为Grid项添加语义和toggle修饰符的可选扩展
implementation(“com.dragselectcompose:extensions:2.3.0”)

// 为LazyGrid实现选择UI的可选包装器
implementation(“com.dragselectcompose:grid:2.3.0”)
}
}
}
}
使用方法

:core模块提供了一个Modifier扩展，用于为您的LazyGrid添加拖动选择功能：

fun Modifier.gridDragSelect(
items:List,
state:DragSelectState,
enableAutoScroll:Boolean=true,
autoScrollThreshold:Float?=null,
enableHaptics:Boolean=true,
hapticFeedback:HapticFeedback?=null,
): Modifier
该函数提供以下功能：

• 添加长按拖动手势以选择项
• 维护已选择项的列表
• 暴露inSelectionMode: Boolean，用于显示未选择状态
• 如果enableAutoScroll为true，当到达列表顶部或底部时，列表将开始滚动
• 如果enableHaptics为true，将触发“长按”触觉反馈
  基本示例

以下是一个基本的实现示例：

data classModel(
val id:Int,
val title:String,
val imageUrl:String,
)

@Composable
fun MyGrid(models: List){
val dragSelectState = rememberDragSelectState()
LazyVerticalGrid(
columns =GridCells.Adaptive(minSize =128.dp),
state = dragSelectState.lazyGridState,
verticalArrangement =Arrangement.spacedBy(3.dp),
horizontalArrangement =Arrangement.spacedBy(3.dp),
modifier =Modifier.gridDragSelect(
items = models,
state = dragSelectState,
),
){
items(models, key ={ it.id }){ model ->
val isSelected by remember { derivedStateOf { dragSelectState.isSelected(model)}}
val inSelectionMode = dragSelectState.inSelectionMode

// 定义您的Model Composeable并使用isSelected或inSelectionMode
}
}
}
扩展功能

dragselectcompose和extensions模块中包含一些扩展功能，以便在选择模式下为Grid项轻松添加支持辅助功能语义和toggle修饰符。

• Modifier.dragSelectSemantics()
• 为修饰符添加长按语义以支持辅助功能。
• Modifier.dragSelectToggleable()
• 在Grid处于选择模式时，允许切换项。
• Modifier.dragSelectToggleableItem()
• 结合以上两个扩展。
  示例代码：

@Composable
fun MyGrid(models: List){
val dragSelectState = rememberDragSelectState()
LazyVerticalGrid(
// …
){
items(models, key ={ it.id }){ model ->
// 添加语义和toggle修饰符
MyItemContent(
item = model,
modifier =Modifier.dragSelectToggleable(
state = dragSelectState,
item = model,
),
)
}
}
}
包装器

grid模块提供了一种“全包”式的拖动选择体验。它包含了对LazyHorizontalGrid和LazyVerticalGrid的包装，处理了添加Modifier.gridDragSelect的细节。

使用LazyDragSelectVerticalGrid或LazyDragSelectHorizontalGrid时，content()作用域提供了一个自定义作用域，可用于处理选择指示器并为填充添加动画。

示例代码：

@Composable
fun MyGrid(models: List){
val dragSelectState = rememberDragSelectState()

LazyDragSelectVerticalGrid(
columns =GridCells.Adaptive(minSize =128.dp),
items = models,
state = dragSelectState,
){
items(key ={ it.id }){ model ->
SelectableItem(item = model){
// 您的Composeable项
}
}
}
}
演示

要运行库的演示，可以查看/demo目录下的标准Android应用程序和Compose多平台应用程序。

Android演示

在:demo:android模块中包含一个演示应用程序，按以下步骤运行：

git clone git@github.com:jordond/drag-select-compose.git drag-select-compose
cd drag-select-compose
./gradlew assembleRelease
然后安装demo/android/build/outputs/apk/release/demo-release.apk文件到您的设备上。

多平台演示

演示在:demo:kmm模块中。要运行它，您需要安装最新版本的Android Studio。

结语

Drag Select Compose库使我们能够轻松实现复杂的多选功能，同时支持多种平台。通过该库，我们不仅可以简化开发流程，还可以为用户提供流畅的交互体验。希望通过这篇博客，您能更好地理解和应用这一强大的工具。

了解更多信息，请访问DragSelectCompose文档

https://docs.dragselectcompose.com。