android - 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
            )
        }