可组合项中出现意外边界。即使边框宽度为零，边框也会显示。？

Question

我创建了一个自定义可组合项来显示框内的文本。即使我使用修饰符将边框宽度指定为零，可组合项仍然显示细边框。知道为什么可组合（或修饰符）会这样表现吗？

可组合代码

@Composable
fun TextBox(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Yellow,
    borderWidth: Dp = 0.dp,
    borderColor: Color = Color.Black
) {
    Box(
        modifier = modifier
            .background(backgroundColor)
            .border(
                width = borderWidth,
                color = borderColor
            ),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "EXPLORE")
    }
}

预览代码

@Preview(showBackground = true)
@Composable
fun TextBoxPreview() {
    TextBox(
        modifier = Modifier
            .fillMaxWidth()
            .height(75.dp)
            .padding(16.dp),
        backgroundColor = Color.Yellow,
        borderWidth = 0.dp,
        borderColor = Color.Black
    )
}

输出预览

Answer 1

在 中Border.kt，我们可以看到这个方法，

fun Modifier.border(width: Dp, brush: Brush, shape: Shape): Modifier = composed(
    // irrelevant code
    val hasValidBorderParams = width.toPx() >= 0f && size.minDimension > 0f
    if (!hasValidBorderParams) {
        drawContentWithoutBorder()
    } else {
    val strokeWidthPx = min(
        if (width == Dp.Hairline) 1f else ceil(width.toPx()),
        ceil(size.minDimension / 2)
    )
    // irrelevant code
    }
    // irrelevant code
}

而对于Dp.Hairline.

val Hairline = Dp(value = 0f)

因此，提供 的边框宽度会0.dp创建 的边框1px。

如果我们想有条件地隐藏边框，
我们可以Transparent根据宽度使用边框颜色。

.border(
    width = borderWidth,
    color = if (borderWidth == 0.dp) {
        Transparent
    } else {
        borderColor
    },
),