如何在Jetpack Compose的Switch中设置TrackWidth、TrackStrokeWidth、ThumbDiameter尺寸

在Jetpack Compose Material库的Switch组件中，官方已经内置了尺寸配置入口，无需自定义绘制即可调整TrackWidth、TrackStrokeWidth、ThumbDiameter三个参数，具体实现如下：

修改后的完整代码 #

你只需要在原有Switch配置中新增dimensions参数，通过SwitchDefaults.dimensions()传入自定义尺寸即可：

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,
    ),
    // 新增尺寸配置块
    dimensions = SwitchDefaults.dimensions(
        trackWidth = 52.dp, // 自定义轨道宽度，可按需修改数值
        trackStrokeWidth = 1.dp, // 自定义轨道描边宽度，可按需修改数值
        thumbDiameter = 24.dp // 自定义滑块直径，可按需修改数值
    )
)

低版本兼容方案 #

如果你的Compose Material版本低于1.3.0，没有内置dimensions参数，可选择两种适配方式：

• 升级androidx.compose.material:material依赖到1.3.0及以上版本，即可直接使用上述配置
• 若无法升级，可通过Modifier.graphicsLayer(scaleX = 1.2f, scaleY = 1.2f)等比例缩放Switch整体尺寸，该方式适合不需要单独调整某一个维度的场景

注意事项 #

• 配置尺寸时请保证thumbDiameter小于trackWidth，避免滑块超出轨道出现显示异常
• 调整尺寸后如果触摸点击区域过小，可以给Switch的modifier添加requiredSize()或者touchTargetPadding()扩大点击区域，提升交互体验

内容的提问来源于stack exchange，提问作者Boris Sadakov