如何僅在 Jetpack Compose 的底部添加邊框

Question

我想在布局底部添加邊框。 我知道我可以使用Divider composable，但我只想學習如何繪制邊框。

目前，我可以為所有邊添加邊框，這不是我想要的。

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

您可以在元素的底部定義一個矩形形狀，使用底線粗細作為參數：

private fun getBottomLineShape(bottomLineThickness: Float) : Shape {
    return GenericShape { size, _ ->
        // 1) Bottom-left corner
        moveTo(0f, size.height)
        // 2) Bottom-right corner
        lineTo(size.width, size.height)
        // 3) Top-right corner
        lineTo(size.width, size.height - bottomLineThickness)
        // 4) Top-left corner
        lineTo(0f, size.height - bottomLineThickness)
    }
}

然后像這樣在邊框修飾符中使用它：

val lineThickness = with(LocalDensity.current) {[desired_thickness_in_dp].toPx()}
Row(
    modifier = Modifier
       .height(rowHeight)
       .border(width = lineThickness,
               color = Color.Black,
               shape = getBottomLineShape(lineThickness))
) {
  // Stuff in the row
}

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
            )
        }){
    //....
}

Answer 4

是的，這應該這樣做：-

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