Jetpack Compose：DrawBehind 与按钮背景高度不同

Question

我正在尝试使用drawBehind-Modifier 向我的按钮绘制一个RoundRect。该按钮还有背景颜色。我的问题是 RoundRect 的高度与按钮背景的高度不匹配。 有什么建议吗？

代码：

Button(
modifier = Modifier
    .fillMaxWidth()
    .padding(horizontal = 32.dp, vertical = 16.dp)
    .drawBehind {
        drawRoundRect(
            color = Color.Blue,
            size = Size(size.width, size.height),
            style = Stroke(
                width = 3f, pathEffect = PathEffect.dashPathEffect(
                    floatArrayOf(10f, 10f), 0f
                )
            ),
            cornerRadius = CornerRadius(25.dp.toPx())
        )
    },
colors = ButtonDefaults.buttonColors(
    containerColor = Color.Yellow,
    contentColor = MaterialTheme.colorScheme.onSurfaceVariant
),
onClick = {
    isErrorBank = isBankEmpty

    if (!isErrorBank) {
        saveButtonClicked = "gespeichert"
        onEvent(AccountEvent.SaveAccount)
        navHostController.popBackStack()
    }
})

Answer 1

由于可访问性，其高度为 48.dp。您可以将高度更改为 48.dp，这是必需的，因为尺寸修改器是在您分配后

drawWithContent

设置的，或者您可以使用

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false)

取消 48.dp 如果您不想考虑可达性高度。

@Preview
@Composable
private fun ButtonTest() {

    Column {
        Button(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 32.dp, vertical = 16.dp)
                .height(48.dp)
                .drawWithContent {
                    drawContent()
                    drawRoundRect(
                        color = Color.Blue,
                        size = Size(size.width, size.height),
                        style = Stroke(
                            width = 3f, pathEffect = PathEffect.dashPathEffect(
                                floatArrayOf(10f, 10f), 0f
                            )
                        ),
                        cornerRadius = CornerRadius(25.dp.toPx())
                    )
                },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Yellow,
                contentColor = MaterialTheme.colorScheme.onSurfaceVariant
            ),
            onClick = {}
        ) {
            Text("HELLO WORLD")
        }

        CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 32.dp, vertical = 16.dp)
                    .drawWithContent {
                        drawContent()
                        drawRoundRect(
                            color = Color.Blue,
                            size = Size(size.width, size.height),
                            style = Stroke(
                                width = 3f, pathEffect = PathEffect.dashPathEffect(
                                    floatArrayOf(10f, 10f), 0f
                                )
                            ),
                            cornerRadius = CornerRadius(25.dp.toPx())
                        )
                    },
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color.Yellow,
                    contentColor = MaterialTheme.colorScheme.onSurfaceVariant
                ),
                onClick = {}
            ) {
                Text("HELLO WORLD")
            }
        }
    }
}