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 <Item> Modifier.gridDragSelect(
items:List<Item>,
state:DragSelectState<Item>,
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<Model>){
val dragSelectState = rememberDragSelectState<Model>()
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<Model>){
val dragSelectState = rememberDragSelectState<Model>()
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<Model>){
val dragSelectState = rememberDragSelectState<Model>()
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。
