簡介

在使用compose制作UI時發(fā)現(xiàn)，compose只提供了水平方向的進度條，但是項目中需要使用垂直方向的進度條，于是動手自己組合了一個，支持拖拽；直接上代碼

@Composable
fun VerticalSlider(
    modifier: Modifier,
    progress: Int,
    maxProgress: Int = 100,
    onValueChange: (Int) -> Unit) {

    BoxWithConstraints(modifier = modifier) {

        val thumbSize = maxWidth
        val length = maxHeight
        val maxLengthPx = with(LocalDensity.current) {
            (length - thumbSize).toPx()
        }

        var offsetX by remember(progress) {
            mutableStateOf(maxLengthPx * (progress * 1f / maxProgress))
        }

        // 創(chuàng)建并獲取一個DraggableState實例
        val draggableState = rememberDraggableState {
            // 使用回調(diào)方法回傳的參數(shù)對狀態(tài)偏移量進行累加，并限制范圍
            val newValue = (offsetX - it).coerceIn(0f, maxLengthPx)
            if (newValue == offsetX) return@rememberDraggableState
            offsetX = newValue
            onValueChange.invoke((maxProgress * (abs(offsetX) / maxLengthPx)).roundToInt())
        }

        Spacer(
            modifier = Modifier
                .then(Modifier.pointerInput(this) {
                    detectTapGestures(
                        onTap = {
                            offsetX = (maxLengthPx - it.y)
                            onValueChange.invoke((maxProgress * (abs(offsetX) / maxLengthPx)).roundToInt())
                        }
                    )
                })
                .fillMaxHeight()
                .width(thumbSize / 2)
                .align(Alignment.BottomCenter)
                .background(Color(0xFFDDE1ED), shape = RoundedCornerShape(50)))

        Spacer(
            modifier = Modifier
                .height(with(LocalDensity.current) { offsetX.toDp() } + thumbSize / 2)
                .width(thumbSize / 2)
                .align(Alignment.BottomCenter)
                .background(Color(0xff6297FF), shape = RoundedCornerShape(50)))
        Card(
            modifier = Modifier
                .size(thumbSize)
                .align(Alignment.BottomCenter)
                .offset { IntOffset(0, -offsetX.roundToInt()) }
                .draggable(
                    orientation = Orientation.Vertical,
                    state = draggableState
                ),
            colors = CardDefaults.cardColors(containerColor = Color.White),
            shape = CircleShape,
            elevation = CardDefaults.elevatedCardElevation(defaultElevation = 1.dp)) {
            Icon(
                painter = painterResource(id = R.drawable.v_ic_volume),
                tint = Color.Unspecified,
                contentDescription = null,
                modifier = Modifier
                    .padding(2.dp)
                    .fillMaxSize())
        }
    }
}


@Preview(showBackground = true)
@Composable
fun VerticalSliderPre() {
    VerticalSlider(
        modifier = Modifier
            .width(10.dp)
            .height(150.dp),
        0) {}
}

效果

進度條