jetpack compose 中的圆形可拖动滑块答案

【问题标题】：Circular draggable slider in jetpack composejetpack compose 中的圆形可拖动滑块
【发布时间】：2022-01-22 01:30:06
【问题描述】：

我需要准备一个带有圆形滑块的 UI，我可以在其中传递值或移动拖动指针以在滑块中滑动，类似于附加的屏幕截图。

我怎样才能实现它？

【问题讨论】：

标签： android kotlin android-jetpack-compose android-jetpack

【解决方案1】：

您可以查看此快速解决方案。我在右侧有 0 度，但您可以根据需要反转象限。

@Composable
fun Content() {
    var radius by remember {
        mutableStateOf(0f)
    }

    var shapeCenter by remember {
        mutableStateOf(Offset.Zero)
    }

    var handleCenter by remember {
        mutableStateOf(Offset.Zero)
    }

    var angle by remember {
        mutableStateOf(20.0)
    }

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    handleCenter += dragAmount

                    angle = getRotationAngle(handleCenter, shapeCenter)
                    change.consumeAllChanges()
                }
            }
            .padding(30.dp)

    ) {
        shapeCenter = center

        radius = size.minDimension / 2

        val x = (shapeCenter.x + cos(Math.toRadians(angle)) * radius).toFloat()
        val y = (shapeCenter.y + sin(Math.toRadians(angle)) * radius).toFloat()

        handleCenter = Offset(x, y)

        drawCircle(color = Color.Black.copy(alpha = 0.10f), style = Stroke(20f), radius = radius)
        drawArc(
            color = Color.Yellow,
            startAngle = 0f,
            sweepAngle = angle.toFloat(),
            useCenter = false,
            style = Stroke(20f)
        )

        drawCircle(color = Color.Cyan, center = handleCenter, radius = 60f)
    }
}

private fun getRotationAngle(currentPosition: Offset, center: Offset): Double {
    val (dx, dy) = currentPosition - center
    val theta = atan2(dy, dx).toDouble()

    var angle = Math.toDegrees(theta)

    if (angle < 0) {
        angle += 360.0
    }
    return angle
}

【讨论】：

【解决方案2】：

在 Github 上的 code 中查看解决方案。只需替换 Canvas 中的角度值即可。

【讨论】：

问题是我也需要一个可拖动的来拖动和管理值