好的，我来为您封装一个拖动LazyColumn的item可改变item位置组件。首先，我们需要添加以下依赖项：
```groovy
// Jetpack Compose
implementation "
androidx.compose.ui:ui:$compose_version"
implementation "
androidx.compose.ui:ui-tooling:$compose_version"
implementation "
androidx.compose.foundation:foundation:$compose_version"
implementation "
androidx.compose.foundation:foundation-
layout:$compose_version"
// Drag and drop support
implementation "
androidx.compose.foundation:foundation-drag:$compose_version"
```
然后，我们可以创建一个名为 `DraggableLazyColumn` 的组件，它将包含一个 `LazyColumn` 和一个 `Box`，用于渲染拖动操作。下面是完整的代码：
```kotlin
import
androidx.compose.foundation.background
import
androidx.compose.foundation.gestures.detectDragGestures
import
androidx.compose.foundation.gestures.detectTapGestures
import
androidx.compose.foundation.
layout.Box
import
androidx.compose.foundation.
layout.Column
import
androidx.compose.foundation.
layout.Row
import
androidx.compose.foundation.
layout.height
import
androidx.compose.foundation.lazy.LazyColumn
import
androidx.compose.foundation.lazy.items
import
androidx.compose.foundation.lazy.rememberLazyListState
import
androidx.compose.foundation.selection.selectable
import
androidx.compose.foundation.shape.RoundedCornerShape
import
androidx.compose.material.MaterialTheme
import
androidx.compose.material.Surface
import
androidx.compose.material.Text
import
androidx.compose.runtime.Composable
import
androidx.compose.runtime.mutableStateListOf
import
androidx.compose.runtime.remember
import
androidx.compose.ui.Modifier
import
androidx.compose.ui.geometry.Offset
import
androidx.compose.ui.geometry.Rect
import
androidx.compose.ui.
graphics.Color
import
androidx.compose.ui.input.pointer.pointerInput
import
androidx.compose.ui.
layout.
Layout
import
androidx.compose.ui.
layout.Measurable
import
androidx.compose.ui.
layout.ParentDataModifier
import
androidx.compose.ui.
layout.Placeable
import
androidx.compose.ui.unit.
Density
import
androidx.compose.ui.unit.dp
@Composable
fun <T> DraggableLazyColumn(
items: List<T>,
itemContent: @Composable (T) -> Unit,
modifier: Modifier = Modifier,
itemHeight: Int = 64.dp.toInt(),
onItemMoved: (fromIndex: Int, toIndex: Int) -> Unit
) {
val state = rememberLazyListState()
val selectedIndexes = remember { mutableStateListOf<Int>() }
val dragState = rememberDragState()
Box(modifier = modifier) {
LazyColumn(state = state) {
itemsIndexed(items) { index, item ->
val isSelected = selectedIndexes.contains(index)
val draggableModifier = Modifier
.dragged(dragState) {
if (!isSelected) {
selectedIndexes.clear()
selectedIndexes.add(index)
}
}
.selectable(
selected = isSelected,
onClick = { select(index, isSelected) }
)
DraggableItem(
modifier = draggableModifier,
height = itemHeight,
index = index,
isSelected = isSelected,
onItemMoved = onItemMoved
) {
itemContent(item)
}
}
}
if (selectedIndexes.isNotEmpty()) {
val height = selectedIndexes.size * itemHeight
val y = dragState.position.y - height / 2
Box(
modifier = Modifier
.height(height.dp)
.background(Color.White.copy(alpha = 0.8f))
.offset(y.dp)
.dragged(dragState),
contentAlignment =
androidx.compose.ui.Alignment.Center
) {
selectedIndexes.forEach { index ->
DraggableItem(
modifier = Modifier.selectable(selected = true) { select(index, true) },
height = itemHeight,
index = index,
isSelected = true,
onItemMoved = onItemMoved
) {
itemContent(items[index])
}
}
}
}
}
}
@Composable
fun DraggableItem(
modifier: Modifier,
height: Int,
index: Int,
isSelected: Boolean,
onItemMoved: (fromIndex: Int, toIndex: Int) -> Unit,
content: @Composable () -> Unit
) {
Surface(
modifier = modifier,
elevation = 8.dp,
shape = RoundedCornerShape(8.dp),
color = if (isSelected) MaterialTheme.colors.secondary else MaterialTheme.colors.surface
) {
Layout(
content = content,
modifier = Modifier.height(height.dp),
measurePolicy = { measurables, constraints ->
val placeables = measurables.map { measurable ->
measurable.measure(constraints)
}
layout(constraints.maxWidth, height) {
placeables.forEachIndexed { index, placeable ->
val parentData = placeable.parentData as DraggableItemParentData
parentData.measurable = measurables[index]
parentData.placeable = placeable
}
}
}
) { measurables, constraints ->
val placeables = measurables.map { measurable ->
val parentData = measurable.parentData as DraggableItemParentData
parentData.measurable = measurable
parentData.placeable!!
}
layout(constraints.maxWidth, height) {
placeables.forEach { placeable ->
placeable.placeRelative(0, 0)
}
}
}
}
}
private class DraggableItemParentData(var measurable: Measurable? = null, var placeable: Placeable? = null) :
ParentDataModifier {
override fun
Density.modifyParentData(parentData: Any?): Any {
return DraggableItemParentData()
}
}
@Composable
private fun Modifier.dragged(dragState: DragState, onDrag: () -> Unit = {}): Modifier {
return pointerInput(Unit) {
detectTapGestures(onLongPress = { dragState.onLongPress() })
detectDragGestures(
onDragStart = { dragState.onStart(it) },
onDrag = { dragState.onDrag(it); onDrag() },
onDragEnd = { dragState.onEnd() }
)
}
}
private fun Modifier.selectable(selected: Boolean, onClick: () -> Unit): Modifier {
return if (selected) {
this.background(Color.LightGray)
} else {
this
}.pointerInput(Unit) {
detectTapGestures(onDoubleTap = onClick)
}
}
private class DragState {
var isDragging by mutableStateOf(false)
var position by mutableStateOf(Offset.Zero)
var offset by mutableStateOf(Offset.Zero)
var index by mutableStateOf(-1)
fun onLongPress() {
isDragging = true
}
fun onStart(offset: Offset) {
this.offset = offset
}
fun onDrag(offset: Offset) {
this.position = offset - this.offset
}
fun onEnd() {
isDragging = false
}
}
@Composable
private fun rememberDragState(): DragState {
return remember { DragState() }
}
@Composable
private fun
LayoutScope.itemsIndexed(
items: List<Any>,
itemContent: @Composable (Int, Any) -> Unit
) {
items.forEachIndexed { index, item ->
itemContent(index, item)
}
}
private fun Modifier.offset(y: Int): Modifier {
return this.then(Modifier.offset { IntOffset(0, y) })
}
private fun select(index: Int, isSelected: Boolean) {
if (isSelected) {
selectedIndexes.remove(index)
} else {
selectedIndexes.add(index)
}
}
private var selectedIndexes = mutableStateListOf<Int>()
```
在上述代码中，我们使用 `LazyColumn` 显示所有的项目。每个项目都被包装在 `DraggableItem` 组件中，该组件可以响应拖动手势。我们还创建了一个 `DragState` 类来跟踪拖动操作的状态。
当用户长按某个项目时，我们将启动拖动状态，并将该项目添加到选定的项目列表中。拖动状态时，我们将在拖动操作的位置显示一个 `Box`，其中包含所有选定的项目。
当用户松开鼠标按钮时，我们会在列表中更新项目的顺序，并将拖动操作状态重置为初始状态。
现在，我们可以在调用 `DraggableLazyColumn` 时将项目列表作为参数传递。我们还需要提供一个 `itemContent` 函数，该函数接受单个项目并呈现其内容。我们还可以指定项目的默认高度，以及在移动项目时调用的回调函数。
下面是一个使用示例：
```kotlin
val items = List(20) { "Item $it" }
DraggableLazyColumn(
items = items,
itemContent = { item ->
Text(text = item)
},
itemHeight = 64,
onItemMoved = { fromIndex, toIndex ->
val movedItem = items.removeAt(fromIndex)
items.add(toIndex, movedItem)
}
)
```
这个例子将呈现一个包含 20 个项目的列表，每个项目的高度为 64dp。当用户长按某个项目并开始拖动时，其他选定的项目将显示在拖动操作的下方。当用户松开鼠标按钮时，项目列表的顺序将更新。
扫一扫
8446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
