Jetpack Compose设置border宽度为0.dp仍显示细边框问题

自定义Composable用于在Box容器内展示文本，即便通过Modifier显式指定border宽度为0.dp，该Composable仍然会渲染出一条细边框，需定位异常原因。

问题复现代码 #

自定义TextBox组件代码 #

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

异常效果 #

该现象是Modifier.border()的固有实现逻辑导致的，并非渲染bug：

• 当传入border修饰符的宽度参数为0.dp时，框架不会跳过边框绘制流程，而是自动使用Hairline（极细线） 描边策略，该策略会固定绘制1个物理像素宽度的线条，不受Dp到像素的换算比例影响，因此即使指定0.dp宽度，依然会看到1像素细边框。
• 框架默认将0.dp的描边宽度语义定义为“绘制设备可显示的最细边框”，而非“不绘制边框”。

如果需要边框宽度为0时完全不显示边框，不要直接将0.dp传入border修饰符，需要通过条件判断动态添加border修饰符：

@Composable
fun TextBox(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Yellow,
    borderWidth: Dp = 0.dp,
    borderColor: Color = Color.Black
) {
    Box(
        modifier = modifier
            .background(backgroundColor)
            .then(
                // 仅当边框宽度大于0时才添加border修饰符
                if (borderWidth > 0.dp) {
                    Modifier.border(width = borderWidth, color = borderColor)
                } else Modifier
            ),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "EXPLORE")
    }
}

内容的提问来源于stack exchange，提问作者Unaisul Hadi