Jetpack Compose 按钮​​填充在边框之外：为什么？

Question

使用 Button，我想调整其尺寸，使其边框紧贴其宽度，最小宽度和高度为 40dp。在下面的示例中，我喜欢 BigNumber 预览的外观。它没有任何外部水平填充。默认预览在边框外有填充。如何在不设置绝对宽度的情况下解决此问题？考虑这个示例：

@Composable
fun BasketQuantityStepper(
    quantityControlsViewState: QuantityControlsViewState,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Button(
        onClick = onClick,
        colors = ButtonDefaults.buttonColors(backgroundColor = colorResource(id = R.color.basketQuantityStepperBackground)),
        border = BorderStroke(dimensionResource(id = R.dimen.buttonBorderWidth), colorResource(id = R.color.basketQuantityStepperBorderColor)),
        modifier = modifier
            .heightIn(min = 40.dp)
            .widthIn(min = 40.dp),
    ) {
        Text(
            text = "${quantityControlsViewState.currentQuantity}",
        )
    }
}

@Preview
@Composable
private fun PreviewDefault() {
        BasketQuantityStepper(quantityControlsViewState = QuantityControlsViewState(
            currentQuantity = 1,
            minOrderQuantity = 1,
            maxOrderQuantity = 10,
            stepQuantity = 1
        ), onClick = {})
}

@Preview
@Composable
private fun PreviewBigNumber() {
        BasketQuantityStepper(quantityControlsViewState = QuantityControlsViewState(
            currentQuantity = 100,
            minOrderQuantity = 1,
            maxOrderQuantity = 1000,
            stepQuantity = 1
        ), onClick = {})
}

Answer 1

默认情况下，可组合项触摸区域的最小尺寸为 48.dp，以实现可访问性。

您可以通过将按钮包裹起来来删除它

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {

}

但不建议 Composable 的大小小于 accebility 的大小。图标、复选框、甚至滑块默认都使用 48.dp。

        CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
            Button(
                onClick = {},
                border = BorderStroke(2.dp, Color.LightGray),
                modifier = Modifier
                    .border(2.dp, Color.Green)
                    .heightIn(min = 40.dp)
                    .widthIn(min = 40.dp),
            ) {
                Text(
                    text = "$counter",
                )
            }
        }

https://developer.android.com/jetpack/compose/accessibility

删除 Jetpack Compose 新更新中复选框周围的默认填充