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

Question

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

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

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

是的，这应该这样做：-

@Suppress("UnnecessaryComposedModifier")
fun Modifier.topRectBorder(width: Dp = Dp.Hairline, brush: Brush = SolidColor(Color.Black)): Modifier = composed(
    factory = {
        this.then(
            Modifier.drawWithCache {
                onDrawWithContent {
                    drawContent()
                    drawLine(brush, Offset(width.value, 0f), Offset(size.width - width.value, 0f))
                }
            }
        )
    },
    inspectorInfo = debugInspectorInfo {
        name = "border"
        properties["width"] = width
        if (brush is SolidColor) {
            properties["color"] = brush.value
            value = brush.value
        } else {
            properties["brush"] = brush
        }
        properties["shape"] = RectangleShape
    }
)

Answer 2

您可以在绘图范围内绘制一条线。在我看来，分隔符在代码中看起来更干净。

Row(modifier = Modifier
  .drawWithContent {
    drawContent()
    clipRect { // Not needed if you do not care about painting half stroke outside
      val strokeWidth = Stroke.DefaultMiter
      val y = size.height // - strokeWidth 
          // if the whole line should be inside component
      drawLine(
        brush = SolidColor(Color.Red),
        strokeWidth = strokeWidth,
        cap = StrokeCap.Square,
        start = Offset.Zero.copy(y = y),
        end = Offset(x = size.width, y = y)
      )
    }
  }
) {
  Text("test")
}

Answer 3

您可以使用 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
            )
        }){
    //....
}