Jetpack Compose wrapContentHeight/ heightIn 在按钮周围添加额外的空间

Question

我正在学习 Jetpack Compose，并且创建了几组按钮作为练习。

这是按钮

@Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier,
    isEnabled: Boolean = true,
    onClick: () -> Unit,
) {

        Button(
            enabled = isEnabled,
            onClick = { onClick() },
            modifier = modifier.width(270.dp).wrapContentHeight(),
        ) {
            Text(
                text = text,
                style = MaterialTheme.typography.button
            )
        }
    
}

问题是，如果我将按钮的高度设置为wrapContentHeight或使用heightIn不同的最大值和最小值，则 compose 会自动在按钮周围添加一个空格，如此处所示

但是如果我删除 WrapContent 并使用固定高度，或者定义相同的最小和最大高度，heightIn则不会出现此问题

@Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier,
    isEnabled: Boolean = true,
    onClick: () -> Unit,
) {

        Button(
            enabled = isEnabled,
            onClick = { onClick() },
            modifier = modifier.width(270.dp).height(36.dp),
        ) {
            Text(
                text = text,
                style = MaterialTheme.typography.button
            )
        }

}

这是用于功能列/预览的代码：

@Composable
private fun SampleScreen() {
    MyTheme{
        Surface(modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background,){
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterVertically),
                modifier = Modifier.padding(20.dp)
            ) {
                var isEnabled by remember { mutableStateOf(false) }

                MyButton("Enable/Disable") {
                    isEnabled = !isEnabled
                }
                MyButton("Button") {}
                MyButton(text = "Disabled Button", isEnabled = isEnabled) {}
            }
        }
    }
}

即使我spacedBy从列中删除运算符，也会出现相同的问题。

我试图寻找对此的解释，但我没有找到任何东西。

任何带有解释的帮助或资源都将受到赞赏。

Answer 1

这是因为为了可访问性，可组合项触摸区域的最小尺寸默认为 48.dp。但是您可以通过使用来覆盖它

    CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
     Button(
        enabled = isEnabled,
        onClick = { onClick() },
        modifier = modifier.heightIn(min = 20.dp)
                .widthIn(min = 20.dp),
    ) {
        Text(
            text = text,
            style = MaterialTheme.typography.button
        )
    }
}

或者类似的东西

   Button(modifier = Modifier.absoluteOffset((-12).dp, 0.dp)){
            Text(
                text = text,
                style = MaterialTheme.typography.button
            )
        }