Jetpack Compose自定义可滑动开关：仅让深灰滑块响应滑动手势

问题出在你把swipeable修饰符应用到了外层的浅灰色背景Box上，导致整个背景区域都会响应滑动手势。要实现仅深灰色滑块触发滑动，只需将swipeable逻辑转移到内层滑块的Modifier中即可，完整修改后的代码如下：

val width = 96.dp
val squareSize = 48.dp

val swipeableState = rememberSwipeableState(0)
val sizePx = with(LocalDensity.current) { squareSize.toPx() }
val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states

Box(
    modifier = Modifier
        .width(width)
        .background(Color.LightGray)
) {
    Box(
        Modifier
            .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
            .size(squareSize)
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.3f) },
                orientation = Orientation.Horizontal
            )
            .background(Color.DarkGray)
    )
}

关键改动说明 #

• 将swipeable修饰符从外层背景Box移到了内层深灰色滑块的Modifier链中，这样只有当用户触摸或点击滑块区域时，才会触发滑动手势。
• 外层背景Box仅保留宽度和背景设置，不再处理任何滑动相关逻辑。
• 滑块的位置偏移依然通过swipeableState控制，滑动行为和之前保持一致，只是触发区域被限制在了滑块范围内。

内容的提问来源于stack exchange，提问作者Svilen Rusev