Jetpack Compose中LazyRow拖拽：新进展与简化实现问询

2021年之后，Jetpack Compose在拖拽功能上有了显著简化，官方推出了Foundation库中的Reorderable API（从Compose 1.3版本开始正式支持，后续版本持续完善），无需再像早期那样手动处理拖拽手势、坐标计算和状态同步，几行核心代码就能实现LazyColumn的拖拽排序。

核心实现步骤 #

• 1. 准备可观察的列表状态
  使用mutableStateListOf存储列表数据，确保数据变化时自动触发UI重组：

  val items = remember { mutableStateListOf("Item 1", "Item 2", "Item 3", "Item 4") }
  

• 2. 创建可重排的列表状态
  通过rememberReorderableLazyListState获取专门用于拖拽排序的状态，绑定数据移动的逻辑：

  val reorderableState = rememberReorderableLazyListState(
      onMove = { from, to ->
          items.move(from.index, to.index)
      }
  )
  

• 3. 构建支持拖拽的LazyColumn
  在LazyColumn中关联reorderableState，并为每个列表项添加拖拽手势修饰符：

  LazyColumn(
      state = reorderableState.listState,
      modifier = Modifier.reorderable(reorderableState)
  ) {
      itemsIndexed(items, key = { _, item -> item }) { index, item ->
          Text(
              text = item,
              modifier = Modifier
                  .fillMaxWidth()
                  .padding(16.dp)
                  .draggableHandle(reorderableState)
          )
      }
  }
  

额外优化点 #

• 可以通过Modifier.draggableHandle指定列表项中仅特定区域可触发拖拽（比如右侧的拖拽图标），提升交互体验。
• 结合animateItemPlacement修饰符，为拖拽后的列表项添加平滑的位移动画：

  Text(
      text = item,
      modifier = Modifier
          // ...其他修饰符
          .animateItemPlacement()
  )
  

其他可选方案 #

如果需要更灵活的跨组件拖拽（比如LazyColumn和其他组件之间的拖拽），可以使用Compose 1.2及以上版本引入的Drag & Drop API，通过Modifier.dragTarget和Modifier.dropTarget实现，但针对LazyColumn内部的排序场景，Reorderable API是最简便的选择。

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