在现代移动应用开发中,多选功能是一个常见且实用的需求。而实现这种功能可能涉及到复杂的手势处理和状态管理。今天,我将介绍一款强大的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。
声明:文中观点不代表本站立场。本文传送门:https://eyangzhen.com/418168.html