Как перетаскивать несколько поверхностей одновременно в JetPack Compose? ⇐ Android

[Anonymous]

У меня есть композитный, который отображает список " зон ". Я уже внедрил перетаскивание и изменение размера отдельных зон с помощью ввода указателя.

Код: Выделить всё

@Composable
fun MyScreen() {
val listOfZones = remember {
mutableListOf(
DrawZoneModel(200, 300, 160, 160, "1", "one", Color.Red),
DrawZoneModel(380, 440, 200, 480, "2", "two", Color.Blue),
DrawZoneModel(400, 500, 160, 160, "3", "three", Color.Yellow),
DrawZoneModel(400, 700, 160, 160, "4", "four", Color.Magenta),
)
}

Box(
modifier = Modifier.fillMaxSize()
) {
ZoneDragging(listOfZones)
}
}

data class DrawZoneModel(
var left: Int? = 0,
var top: Int? = 0,
var width: Int? = 0,
var height: Int? = 0,
var zoneId: String? = "",
var zoneName: String? = "",
var color: Color? = Color.White,
)

@Composable
fun Int.pxToDp() = with(LocalDensity.current) { this@pxToDp.toDp() }

@Composable
fun ZoneDragging(listOfZones: MutableList) {
val screenWidth: Int = LocalResources.current.displayMetrics.widthPixels
val screenHeight: Int = LocalResources.current.displayMetrics.heightPixels

listOfZones.forEach { dzm ->
val startX = LocalDensity.current.run { dzm.left!!.pxToDp().toPx() }
val startY = LocalDensity.current.run { dzm.top!!.pxToDp().toPx() }
val width = LocalDensity.current.run { dzm.width!!.pxToDp() }
val height = LocalDensity.current.run { dzm.height!!.pxToDp() }

var zoneSize by remember { mutableStateOf(DpSize(width, height)) }
var offset by remember { mutableStateOf(Offset(startX, startY)) }
var selectedZoneColor by remember { mutableStateOf(dzm.color!!) }

Surface(
modifier = Modifier
.offset { offset.round() }
.size(zoneSize)
.drawBehind {
drawRoundRect(
color = selectedZoneColor,
)
}
.pointerInput(Unit) {
detectDragGestures(
onDragStart = {

},
onDragEnd = {
listOfZones.find { it.zoneName == dzm.zoneName }!!.left = offset.round().x
listOfZones.find { it.zoneName == dzm.zoneName }!!.top = offset.round().y
},
) { change, dragAmount ->
val summed = offset + dragAmount
try {
offset = Offset(
x = summed.x.coerceIn(0f, screenWidth.toFloat() - zoneSize.width.toPx()),
y = summed.y.coerceIn(0f, screenHeight.toFloat() - zoneSize.height.toPx()),
)
} catch (iae: IllegalArgumentException) {
iae.printStackTrace()
}
}
},
color = Color.Unspecified,
) {
Text(dzm.zoneId!!, fontWeight = FontWeight.Bold)
}
}
}

Чего я хочу достичь, так это то, что когда синяя зона (#2) перетаскивается, что желтая зона (#3) и зона Магинты (#4) затащили с ней. Таким образом, просто перетаскивание синей зоны должно привести к чему -то подобному:

Что я пробовал:




Подробнее здесь: https://stackoverflow.com/questions/797 ... ck-compose