Jetpack Compose wrapContentHeight/ heightIn is adding aditional space around the buttons-CodePudding

I am learning Jetpack Compose, and I've created a few set of buttons as a practice.

This is the button

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

The problem is, that if i set the height of the button to wrapContentHeight or use heightIn with different max and min vallues, compose automatically adds a space around the button as seen here

But if i remove WrapContent, and use a fixed height, or define same min and max height for heightIn this probblem does not appear

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

}

And this is the code used for the column/preview of the functions:

@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) {}
            }
        }
    }
}

Even if I remove the spacedBy operator from column the same issue appears.

I have tried to search for an explanation to this, but I did not manage to find anything.

Any help or resource with explanations is appreciated.

CodePudding user response：

This is because Minimum dimension of Composables touch area is 48.dp by default for accessibility. However you can override this by using

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

Or something like

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