问题

我有一个Row，其中包含两个组件，Text和Switch，在添加Switch后，我看到上下有空白空间。我想让Switch的高度适应UI的高度。

我使用了padding(0.dp)，但没有起作用。

如何去掉这个空白空间？

这是我的代码:

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(color = Color.Red),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "这是一个文本",
        modifier = Modifier.background(color = Color.Yellow)
    )
    Switch(
        checked = false,
        onCheckedChange = {},
        modifier = Modifier
            .padding(0.dp)
            .background(color = Color.Blue)
    )
}

<details>
<summary>英文:</summary>

I have `Row` with two components, `Text` and `Switch`, after adding the `Switch`, I see the space above and below. I want the heigh of `Switch` is fit to UI height.

I use `padding(0.dp)` but it is not working.

How to remove that?

This is my code:

Row(
    modifier = Modifier
        .fillMaxWidth()
        .background(color = Color.Red),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "This is a text",
        modifier = Modifier.background(color = Color.Yellow)
    )
    Switch(
        checked = false,
        onCheckedChange = {},
        modifier = Modifier
            .padding(0.dp)
            .background(color = Color.Blue)
    )
}

[![Screenshot][1]][1]


  [1]: https://i.stack.imgur.com/gp2xa.png

</details>


# 答案1
**得分**: 7

`Switch`组件和其他许多组件一样，具有**最小触摸目标大小**（`48.dp`），以确保辅助功能。它通过**`minimumInteractiveComponentSize`**修饰符来应用。这会在组件外部包括额外的空间，以确保它们可访问。

您可以在[文档][1]中查看：

&gt; 至少保留 `48.dp` 的大小，以消除触摸交互的歧义，如果元素尺寸较小。
https://m2.material.io/design/usability/accessibility.html#layout-and-typography
&gt;
&gt; 这使用了 Material 推荐的最小尺寸 `48.dp` x `48.dp`，这可能与系统强制的最小尺寸不同。最小可点击/触摸目标大小（默认为 `48.dp`）由系统通过 ViewConfiguration 控制，并在触摸输入层自动扩展。

您可以通过将`LocalMinimumInteractiveComponentEnforcement`设置为`false`来覆盖此行为。如果设置为`false`，则不会有额外的空间。

```kotlin
CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
    Switch(
        checked = switchState,
        onCheckedChange = { switchState = !switchState },
        modifier = Modifier
            .padding(0.dp)
            .background(color = Teal200)
    )
}

注意： LocalMinimumInteractiveComponentEnforcement要求至少是M2 1.4.0-alpha04和M3 1.1.0-alpha04。在同样的方式中使用**LocalMinimumTouchTargetEnforcement**之前，您需要满足这些要求。

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {

        Switch(
            checked = switchState,
            onCheckedChange = { switchState = !switchState },
            modifier = Modifier
                .padding(0.dp)
                .background(color = Teal200)
        )
    }