Compose 绘制Switch Button

154 阅读1分钟
@Composable
fun buildCustomSwitch(modifier: Modifier,isSelected:Boolean,onClick:()->Unit){
val anim = remember {
    Animatable(0f)
}
Box(modifier = modifier
    .drawBehind {
        val circleRadius = size.height / 2
        val diff = 0.dp.toPx()
        val cornerRadius = size.height /2
        val centerOffset =
            Offset(circleRadius + (size.width - 2 * circleRadius) * anim.value,
                size.height / 2)
        drawRoundRect(color = Color(0xFF6C72FF),
            cornerRadius = CornerRadius(cornerRadius, cornerRadius),
            topLeft = Offset(0f, diff),
            size = Size(size.width, size.height - diff * 2)
        )
        val topLeft =
            Offset((size.width - 2 * circleRadius) * anim.value, diff)
        drawRoundRect(color = Color(0xFFD9D9D9),
            topLeft = topLeft,
            cornerRadius = CornerRadius(cornerRadius, cornerRadius),
            size = Size(size.width - topLeft.x, size.height - 2 * topLeft.y)
        )
        drawCircle(color = Color.White, radius = circleRadius, center = centerOffset)

    }
    .clickable {
        onClick.invoke()
        isCheckSelected = !isCheckSelected
    }
)

LaunchedEffect(key1 = isSelected, block = {
    if(isSelected){
        anim.animateTo(1f, tween(durationMillis = 200))
    }else {
        anim.animateTo(0f)
    }
})
}

image.png