缩放Jetpack Compose Switch时如何移除其边距？

问题根源 #

你当前代码的问题有两个：

1. scale只缩放视觉内容，不改变布局占位：scale(0.5f)只是把Switch的绘制内容缩小一半，但组件在布局中占据的空间还是原始尺寸，所以绿色背景（Switch的布局区域）依然是原始大小，看起来就有多余边距。
2. Switch内部自带默认内边距：Switch组件内部默认包含SwitchDefaults.Padding（通常是4.dp）的内边距，即使你加了padding(0.dp)也无法抵消这个内部空白。

解决方案 #

下面提供两种可行方案，按需选择：

方案一：缩放+调整布局尺寸（保留原有样式比例）

通过layout modifier手动调整组件的布局尺寸，让它和缩放后的视觉大小一致，同时抵消内部默认padding：

Row(
    modifier = modifier.then(
        Modifier
            .fillMaxWidth()
            .padding(2.dp)
            .background(color = Color.Yellow)
    ),
    verticalAlignment = Alignment.CenterVertically,
) {
    Text(
        text,
        fontSize = 12.sp,
        modifier = Modifier
            .weight(1f)
            .background(color = Color.Red)
    )
    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
        Switch(
            checked = state,
            onCheckedChange = { onToggle() },
            modifier = Modifier
                // 抵消Switch内部默认的4.dp内边距
                .padding(-SwitchDefaults.Padding)
                // 缩放视觉内容到50%
                .scale(0.5f)
                // 强制把布局尺寸缩小到缩放后的大小
                .layout { measurable, constraints ->
                    val placeable = measurable.measure(constraints)
                    val scaledWidth = (placeable.width * 0.5f).roundToInt()
                    val scaledHeight = (placeable.height * 0.5f).roundToInt()
                    layout(scaledWidth, scaledHeight) {
                        placeable.place(0, 0)
                    }
                }
                .background(color = Color.Green)
        )
    }
}

方案二：直接设置自定义尺寸（更直观）

直接通过requiredSize设置缩小后的Switch尺寸，不需要依赖scale，布局空间和视觉大小完全匹配：

Row(
    modifier = modifier.then(
        Modifier
            .fillMaxWidth()
            .padding(2.dp)
            .background(color = Color.Yellow)
    ),
    verticalAlignment = Alignment.CenterVertically,
) {
    Text(
        text,
        fontSize = 12.sp,
        modifier = Modifier
            .weight(1f)
            .background(color = Color.Red)
    )
    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
        Switch(
            checked = state,
            onCheckedChange = { onToggle() },
            // 原始Switch默认尺寸是32.dp×14.dp，这里直接设置为一半大小
            modifier = Modifier
                .requiredSize(16.dp, 7.dp)
                .background(color = Color.Green)
        )
    }
}

注意点 #

• LocalMinimumInteractiveComponentEnforcement provides false必须保留：默认情况下Compose要求交互组件最小尺寸为48.dp，去掉这个限制才能让缩小后的Switch正常响应点击。

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