Jetpack Compose按钮的边距为什么在边框外？

Question

使用按钮，我希望其尺寸与其边框相吻合，最小宽度和高度为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 = {})
}

- Nino van Hooff

Answer 1

为了增强可访问性，默认情况下 Composables 的触摸区域最小尺寸为 48.dp。

您可以通过将按钮包装起来来移除它

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {

}

但不建议将Composables设置为小于可访问性尺寸。默认情况下，图标、复选框甚至滑块都使用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 最新更新版本中移除复选框的默认填充

- Thracian

Answer 2

LocalMinimumTouchTargetEnforcement已被弃用。

请使用LocalMinimumInteractiveComponentEnforcement。

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {

}

- sadat