Jetpack Compose拖放排序终极指南：Reorderable库的简单实现

Jetpack Compose拖放排序终极指南：Reorderable库的简单实现

【免费下载链接】ReorderableA simple library that allows you to reorder items in `LazyColumn` and `LazyRow` as well as `Column` and `Row` in Jetpack Compose with drag and drop项目地址: https://gitcode.com/gh_mirrors/re/Reorderable

Reorderable是一个简单而强大的库，专为Jetpack Compose和Compose Multiplatform设计，让开发者能够轻松实现LazyColumn、LazyRow、Column和Row中的项目拖放排序功能。无论是构建列表、网格还是复杂布局，Reorderable都能提供流畅的拖放体验，帮助你打造更具交互性的应用界面。

🚀 为什么选择Reorderable库？

在移动应用开发中，用户经常需要自定义内容顺序。传统实现拖放排序需要处理复杂的手势检测、状态管理和动画效果，而Reorderable库将这一切简化，让你只需几行代码就能实现专业级的拖放功能。

核心优势一览

• 多平台支持：完美兼容Android、iOS、Desktop/JVM、Wasm和JS平台
• 灵活适配：支持不同大小的项目和非可排序项目的混合使用
• 丰富交互：支持立即拖动或长按开始拖动两种模式
• 智能滚动：拖动到屏幕边缘时自动滚动，滚动速度基于距离边缘的距离
• 流畅动画：利用Compose的Modifier.animateItemAPI实现项目移动动画
• 拖动手柄：支持将项目的子组件指定为拖动手柄

📱 直观的拖放体验展示

Reorderable库提供了两种主要的拖放排序场景：列表排序和网格排序。以下是实际应用效果展示：

列表拖放排序

图1：在LazyColumn中通过拖动手柄调整项目顺序，支持粘性标题和分段内容

网格拖放排序

图2：在LazyGrid中实现多列项目的自由拖放排序

⚡ 快速开始：3步集成Reorderable

1️⃣ 添加依赖

使用Version Catalog（推荐）

在libs.versions.toml文件中添加：

[versions] reorderable = "3.0.0" [libraries] reorderable = { module = "sh.calvin.reorderable:reorderable", version.ref = "reorderable" }

然后在build.gradle.kts中添加依赖：

dependencies { implementation(libs.reorderable) }

直接使用Gradle

dependencies { implementation("sh.calvin.reorderable:reorderable:3.0.0") }

2️⃣ 实现基本的LazyColumn拖放

以下是一个完整的LazyColumn拖放排序示例，包含触觉反馈：

val hapticFeedback = LocalHapticFeedback.current var list by remember { mutableStateOf(List(100) { "Item $it" }) } val lazyListState = rememberLazyListState() val reorderableLazyListState = rememberReorderableLazyListState(lazyListState) { from, to -> list = list.toMutableList().apply { add(to.index, removeAt(from.index)) } hapticFeedback.performHapticFeedback(HapticFeedbackType.SegmentFrequentTick) } LazyColumn( modifier = Modifier.fillMaxSize(), state = lazyListState, contentPadding = PaddingValues(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { items(list, key = { it }) { ReorderableItem(reorderableLazyListState, key = it) { isDragging -> val elevation by animateDpAsState(if (isDragging) 4.dp else 0.dp) Surface(shadowElevation = elevation) { Row { Text(it, Modifier.padding(horizontal = 8.dp)) IconButton( modifier = Modifier.draggableHandle( onDragStarted = { hapticFeedback.performHapticFeedback(HapticFeedbackType.GestureThresholdActivate) }, onDragStopped = { hapticFeedback.performHapticFeedback(HapticFeedbackType.GestureEnd) }, ), onClick = {}, ) { Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder") } } } } } }

3️⃣ 探索更多组件

Reorderable库支持多种Compose布局组件，每种组件都有简单直观的API：

• LazyRow：水平列表拖放排序
• LazyVerticalGrid/LazyHorizontalGrid：网格布局拖放排序
• LazyVerticalStaggeredGrid/LazyHorizontalStaggeredGrid：瀑布流布局拖放排序
• Column/Row：简单列表拖放排序

完整的示例代码可以在demoApp/composeApp/src/commonMain/kotlin/sh/calvin/reorderable/demo/ui/目录中找到。

💡 高级使用技巧

处理分组列表和头部

当列表包含头部或分组时，需要调整索引计算：

val reorderableLazyColumnState = rememberReorderableLazyListState(lazyListState) { from, to -> list = list.toMutableList().apply { // 调整索引以跳过头部 add(to.index - 1, removeAt(from.index - 1)) } } LazyColumn(state = lazyListState) { item { Text("Header") } // 头部不参与排序 items(list, key = { item -> item.id }) { item -> ReorderableItem(reorderableLazyColumnState, item.id) { // 项目内容 } } }

自定义拖动手柄

可以将拖动手柄传递给子组件：

@Composable fun ListItem(scope: ReorderableCollectionItemScope, item: String) { Row { Text(item) IconButton( modifier = with(scope) { Modifier.draggableHandle() }, onClick = {} ) { Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder") } } }

与Material3组件集成

与Material3的Card组件结合使用时，可通过MutableInteractionSource确保交互状态正确：

val interactionSource = remember { MutableInteractionSource() } Card( onClick = {}, interactionSource = interactionSource, ) { IconButton( modifier = Modifier.draggableHandle(interactionSource = interactionSource), onClick = {} ) { Icon(Icons.Rounded.DragHandle, contentDescription = "Reorder") } }

🏆 被行业领先应用采用

Reorderable库已经被众多知名应用采用，包括：

• Lawnchair Launcher
• Home Assistant
• ProtonVPN
• Pocket Casts
• Mihon

📥 获取项目

要开始使用Reorderable库，请克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/re/Reorderable

探索demoApp目录中的示例，了解如何在实际项目中实现各种拖放排序功能。

Reorderable库为Jetpack Compose开发者提供了简单而强大的拖放排序解决方案，无论是简单列表还是复杂网格，都能轻松实现流畅的拖放体验。立即集成Reorderable，为你的应用添加专业级的交互功能吧！

【免费下载链接】ReorderableA simple library that allows you to reorder items in `LazyColumn` and `LazyRow` as well as `Column` and `Row` in Jetpack Compose with drag and drop项目地址: https://gitcode.com/gh_mirrors/re/Reorderable