Jetpack compose Switch() Track Width, Track Stroke Width, Thumb Diameter答案

【问题标题】：Jetpack compose Switch() TrackWidth, TrackStrokeWidth, ThumbDiameterJetpack compose Switch() Track Width, Track Stroke Width, Thumb Diameter
【发布时间】：2021-05-21 15:43:19
【问题描述】：

也许有人可以告诉我如何在 Switch() 中设置 TrackWidth、TrackStrokeWidth、ThumbDiameter 的大小

                Switch(
                modifier = Modifier
                    .padding(end=16.dp),
                checked = auto.mainAuto.value,
                onCheckedChange = { auto.mainAuto.value = it },
                colors = SwitchDefaults.colors(
                    checkedThumbColor = white_white,
                    checkedTrackColor = Accent_Blue,
                    uncheckedThumbColor = white_white,
                    uncheckedTrackColor = Disabled_Text,
                    ),
            )

【问题讨论】：

目前没办法。您必须定义自己的自定义 Switch
您是否尝试过使用Modifier.scale(1.5f)？如果我是正确的，它可能会帮助你实现你想要的。
@JerryOkafor 嗨，请给小费，但不是我要找的。需要将 ThumbDiameter 设置得更小，TrackWidth 设置得更宽

标签： android-jetpack-compose uiswitch

【解决方案1】：

从 Jetpack Compose 1.0.4 开始，您无法更改它们。但是，好消息是您可以使用 Canvas API 轻松创建自定义开关。

例如：

这是代码：

@Composable
fun CustomSwitch2(
    scale: Float = 2f,
    width: Dp = 36.dp,
    height: Dp = 20.dp,
    strokeWidth: Dp = 2.dp,
    checkedTrackColor: Color = Color(0xFF35898F),
    uncheckedTrackColor: Color = Color(0xFFe0e0e0),
    gapBetweenThumbAndTrackEdge: Dp = 4.dp
) {
    val switchON = remember {
        mutableStateOf(true)
    }
    val thumbRadius = (height / 2) - gapBetweenThumbAndTrackEdge
    val animatePosition = animateFloatAsState(
        targetValue = if (switchON.value)
            with(LocalDensity.current) { (width - thumbRadius - gapBetweenThumbAndTrackEdge).toPx() }
        else
            with(LocalDensity.current) { (thumbRadius + gapBetweenThumbAndTrackEdge).toPx() }
    )
    Canvas(
        modifier = Modifier
            .size(width = width, height = height)
            .scale(scale = scale)
            .pointerInput(Unit) {
                detectTapGestures(
                    onTap = {
                        // This is called when the user taps on the canvas (which is nothing but switch)
                        switchON.value = !switchON.value
                    }
                )
            }
    ) {
        // Track
        drawRoundRect(
            color = if (switchON.value) checkedTrackColor else uncheckedTrackColor,
            cornerRadius = CornerRadius(x = 10.dp.toPx(), y = 10.dp.toPx()),
            style = Stroke(width = strokeWidth.toPx())
        )
        // Thumb
        drawCircle(
            color = if (switchON.value) checkedTrackColor else uncheckedTrackColor,
            radius = thumbRadius.toPx(),
            center = Offset(
                x = animatePosition.value,
                y = size.height / 2
            )
        )
    }
    Spacer(modifier = Modifier.height(18.dp))
    Text(text = if (switchON.value) "ON" else "OFF")
}

更多设计，请查看Jetpack Compose UI Designs with Source Code。

【讨论】：