如何仅在jetpack compose中添加底部边框

Question

我想在布局底部添加边框。我知道我可以使用Divider可组合项，但我只想学习如何绘制边框。

目前，我可以为所有边添加边框，但这不是我想要的。

Row(
    modifier = Modifier
        .border(border = BorderStroke(width = 1.dp, Color.LightGray))
) {
    TextField(value = "", onValueChange = {}, modifier = Modifier.weight(1f))
    Switch(checked = true, onCheckedChange = {})
    Icon(Icons.Filled.Close, "Remove", tint = Color.Gray)
}

Answer 1

您可以使用drawBehind修改器来绘制一条线。
就像是：

Row(
    modifier = Modifier
        .drawBehind {

            val strokeWidth = indicatorWidth.value * density
            val y = size.height - strokeWidth / 2

            drawLine(
                Color.LightGray,
                Offset(0f, y),
                Offset(size.width, y),
                strokeWidth
            )
        }){
    //....
}

如果您愿意，可以使用上面相同的代码构建自定义修饰符

fun Modifier.bottomBorder(strokeWidth: Dp, color: Color) = composed(
    factory = {
        val density = LocalDensity.current    
        val strokeWidthPx = density.run { strokeWidth.toPx() }

        Modifier.drawBehind {
            val width = size.width
            val height = size.height - strokeWidthPx/2

            drawLine(
                color = color,
                start = Offset(x = 0f, y = height),
                end = Offset(x = width , y = height),
                strokeWidth = strokeWidthPx
            )
        }
    }
)

然后应用它：

Row(
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .fillMaxWidth()
        .bottomBorder(1.dp, DarkGray)
){
    //Row content
}

Answer 2

使用“分隔符”对我有用，

Column {
        Divider (
            color = Color.White,
            modifier = Modifier
                .height(1.dp)  
                .fillMaxWidth()
        )
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
        ) {
// Something else
        }
    }